Next.js Basics: Pages, Routing, and Components Quiz Quiz

Dive into the core concepts of Next.js including pages, file-based routing, and reusable components. This quiz checks your understanding of Next.js fundamentals to help reinforce key knowledge for building modern web applications.

1. Creating a New Page in Next.js

   Which directory under the project root should you place a new file to automatically create a new accessible page route in a Next.js application?

   1. public
   2. routes
   3. components
   4. pages

   Explanation: In Next.js, placing a file in the 'pages' directory automatically generates a route based on its file name. The 'routes' directory does not exist by default and will not be recognized by the framework. The 'components' directory is used for reusable UI elements, not for creating routes. The 'public' directory is for static assets such as images, not for pages or routing.

2. Linking Between Pages

   If you want to create a navigation link in a Next.js component that goes to about.js inside the pages directory, which built-in component should you use?

   1. Router
   2. A
   3. Nav
   4. Link

   Explanation: Next.js provides a built-in 'Link' component specifically designed for client-side navigation between internal pages. Using a lowercase 'a' tag does not enable client-side transitions or benefits from prefetching. There is no default 'Nav' component in Next.js for routing. 'Router' is not a component but may refer to routing APIs in advanced usage, not basic link creation.

3. Dynamic Routing in Next.js

   How do you create a dynamic route such as /posts/123 in the pages directory using file naming conventions?

   1. _id.js
   2. (id).js
   3. [id].js
   4. [slug].jsx

   Explanation: Placing a file named '[id].js' in the pages directory creates a dynamic route segment, allowing URLs like /posts/123 or /posts/abc. '_id.js' is not a recognized pattern in Next.js routing. While '[slug].jsx' would work if you want the dynamic parameter to be called 'slug' and use the JSX extension, it does not match the example asking for 'id'. '(id).js' is not a valid dynamic route pattern in Next.js.

4. Component Reuse

   Where should you define a Button component that is reused across several different pages in a Next.js application?

   1. components directory at the project root
   2. styles directory
   3. public directory
   4. pages directory

   Explanation: Reusable UI components like buttons are usually organized in a 'components' directory at the project root for easy maintenance and import across pages. The 'pages' directory is reserved for defining routes, not for shared reusable code. The 'public' directory is exclusively used for static files and assets, not for JavaScript components. The 'styles' directory typically contains CSS or styling files, not component code.

5. Exporting a Page Component

   Which export statement is required for a React component to be treated as a page in the Next.js pages directory?

   1. export default ComponentName;
   2. exports.default = ComponentName;
   3. export ComponentName;
   4. module.exports = ComponentName;

   Explanation: Next.js expects each page file to have a default export that is the React component for that page, using 'export default ComponentName;'. The 'module.exports' and 'exports.default' approaches are syntax from other module systems and are not recommended for modern JavaScript files in Next.js. 'export ComponentName;' only exports a named export, not a default one, so Next.js would not recognize it as a page.