NextJS Next.js Basics Flashcards

24 sample cards from the Next.js Basics deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. In a Next.js project, what is the purpose of the package.json file?

   package.json lists the project's metadata, dependencies, and npm scripts (like dev, build, start), and defines how the project is configured and run.

2. What is the purpose of the next.config.js file?

   next.config.js is the configuration file for customizing Next.js behavior, such as environment variables, redirects, rewrites, image domains, and experimental features.

3. In the App Router, what is the role of the app/ directory?

   The app/ directory holds the application's routes, layouts, and pages using React Server Components; each folder maps to a route segment and defines the routing structure.

4. In the Pages Router, what is the special role of the pages/ directory?

   Each file in pages/ automatically becomes a route based on its filename, and files inside pages/api/ become API endpoints.

5. What is the purpose of the public/ folder in a Next.js project?

   The public/ folder serves static assets (images, fonts, robots.txt, etc.) directly from the root URL; a file at public/logo.png is accessible at /logo.png.

6. In the App Router, what does a page.js (or page.tsx) file define?

   page.js defines the unique UI for a route segment and makes that route publicly accessible; a route is only reachable if it has a page file.

7. In the App Router, what does a layout.js file do?

   layout.js defines shared UI (like headers or navigation) that wraps a segment and its children; layouts persist across navigation and preserve state, and a root layout is required.

8. In the Pages Router, how does the file pages/about.js map to a URL?

   It maps to the route /about — the filename (minus extension) becomes the URL path.

9. In the Pages Router, what URL does the file pages/index.js correspond to?

   The index file maps to the root of its directory, so pages/index.js corresponds to / (the home page).

10. What is the difference between static routing and dynamic routing in Next.js?

    Static routing maps fixed file paths to fixed URLs (e.g., pages/about.js → /about), while dynamic routing uses bracketed parameters (e.g., [id]) to match variable URL segments at runtime.

11. How do you define a dynamic route in the Pages Router for a URL like /posts/123?

    Create a file with square brackets around the parameter name, e.g., pages/posts/[id].js; the value 123 is then available as the id route parameter.

12. In the App Router, how do you create a dynamic route segment?

    Wrap the folder name in square brackets, e.g., app/posts/[id]/page.js. The dynamic value is passed to the page via the params object (params.id).

13. What is a catch-all route in Next.js and how is it written?

    A catch-all route matches multiple path segments using three dots inside brackets, e.g., [...slug].js, which matches /a, /a/b, /a/b/c and provides the segments as an array.

14. What is the difference between a catch-all route [...slug] and an optional catch-all route [[...slug]]?

    [...slug] requires at least one segment to match, while the optional catch-all [[...slug]] (double brackets) also matches the parent route with zero segments.

15. In the Pages Router, how do you access dynamic route parameters inside a component?

    Use the useRouter hook from next/router and read router.query — e.g., const { id } = useRouter().query.

16. What is the Link component in Next.js and where is it imported from?

    Link is Next.js's component for client-side navigation between routes, imported from 'next/link'. It enables SPA-like transitions without a full page reload.

17. Why should you use the Next.js Link component instead of a plain <a> tag for internal navigation?

    Link performs client-side navigation and automatically prefetches linked pages, giving faster transitions without a full page reload, whereas a plain <a> tag triggers a full browser reload.

18. What is the basic syntax for linking to an /about page with the Next.js Link component?

    <Link href="/about">About</Link> — the href prop specifies the destination route.

19. What does prefetching mean in the context of the Next.js Link component?

    Prefetching means Next.js automatically loads the JavaScript/data for a linked route in the background (e.g., when the Link enters the viewport), so navigation feels instant when clicked.

20. What are API Routes in Next.js?

    API Routes let you build backend API endpoints within the same Next.js project. In the Pages Router they live in pages/api/, and each file becomes an HTTP endpoint handled by serverless-style functions.

21. In the Pages Router, what URL does the file pages/api/users.js map to?

    It maps to the endpoint /api/users.

22. In the Pages Router, what is the standard function signature of an API route handler?

    export default function handler(req, res) { ... } — where req is the incoming request object and res is the response object used to send back data.

23. In the App Router, how do you define an API endpoint (Route Handler)?

    Create a route.js (or route.ts) file inside the app directory and export functions named after HTTP methods, e.g., export async function GET(request) { ... } or POST, PUT, DELETE.

24. Why are Next.js API Routes useful for full-stack development?

    They let you write backend logic (database access, authentication, third-party API calls) in the same codebase as your frontend, avoiding a separate server and keeping secrets out of the client bundle.

What this deck covers

Next.js Basics flashcards FAQ