NextJS Advanced Features Flashcards

24 sample cards from the Advanced Features deck

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

1. How do you limit which paths Middleware runs on?

   Export a config object with a matcher, e.g. export const config = { matcher: '/about/:path*' } or an array of paths. Only matching requests invoke the middleware.

2. What are the common actions Middleware can perform on a request?

   Rewrite (NextResponse.rewrite), redirect (NextResponse.redirect), continue with modifications (NextResponse.next), set request/response headers, and read/set cookies. It is commonly used for auth, A/B testing, i18n, and geolocation.

3. Why must Next.js Middleware avoid heavy computation or Node-specific APIs?

   Middleware runs on the Edge Runtime, a lightweight environment that does not support all Node.js APIs and is optimized for low latency. Heavy or Node-only operations can fail or slow every request, so keep middleware fast and lean.

4. How do you return a redirect from Middleware?

   Import NextResponse and return NextResponse.redirect(new URL('/login', request.url)). This sends the client to a new URL before the request reaches the destination route.

5. What is the difference between NextResponse.rewrite and NextResponse.redirect in Middleware?

   redirect changes the URL the browser navigates to (client sees the new URL, extra round trip). rewrite serves content from a different path while keeping the original URL in the address bar (proxy-like, transparent to the user).

6. In an API route, how do you read the request body and query parameters?

   Use req.body for the parsed body (JSON/form data auto-parsed by the built-in body parser) and req.query for query string plus dynamic route parameters. Both are objects.

7. How do you send a JSON response with a specific status code in a Next.js API route?

   Chain the methods: res.status(201).json({ message: 'Created' }). res.status sets the HTTP status and returns res, so json can be chained to serialize and send the body.

8. How do you disable or configure the built-in body parser in a Next.js API route?

   Export a config object from the route, e.g. export const config = { api: { bodyParser: false } } to handle raw bodies (like webhooks/file uploads), or set bodyParser: { sizeLimit: '1mb' } to change the limit.

9. What is a dynamic route in Next.js and how is it created?

   A dynamic route matches variable path segments using square brackets in the filename, e.g. pages/posts/[id].js matches /posts/1, /posts/2, etc. The bracketed name becomes a param available in query and getStaticPaths/getServerSideProps params.

10. How do dynamic routes with getStaticPaths work together for pre-rendering?

    For pages/posts/[id].js you export getStaticPaths returning the list of ids to pre-render (paths) and a fallback strategy, and getStaticProps which receives context.params.id to fetch that post's data at build time.

11. How do you access the dynamic route parameter inside getStaticProps?

    Read it from the context params object: export async function getStaticProps({ params }) { const id = params.id; ... }. The param name matches the bracketed segment in the filename.

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

    A catch-all route uses three dots inside brackets, e.g. pages/posts/[...slug].js. It matches any number of path segments after /posts/, such as /posts/a, /posts/a/b, /posts/a/b/c.

13. What form does the param take for a catch-all route [...slug]?

    The param becomes an array of the matched segments. For /posts/a/b/c, params.slug is ['a', 'b', 'c']. Even a single segment /posts/a yields params.slug = ['a'].

14. Does a catch-all route [...slug] match the base path /posts (with no segments)?

    No. A standard catch-all route requires at least one segment, so /posts (the parent path) is NOT matched and returns 404. Use an optional catch-all route to match the base path too.

15. What is an optional catch-all route and how is it written?

    An optional catch-all route uses double brackets with three dots, e.g. pages/posts/[[...slug]].js. It behaves like a catch-all but ALSO matches the base route /posts with no parameters.

16. What is params.slug for an optional catch-all route [[...slug]] when the base path /posts is requested?

    When no segments are present (i.e. /posts), params is empty and params.slug is undefined. With segments it is an array like ['a', 'b'], identical to a normal catch-all.

17. Summarize the difference between [id], [...slug], and [[...slug]] routes.

    [id] matches exactly one segment (param is a string). [...slug] matches one or more segments (param is an array), but not the base path. [[...slug]] matches zero or more segments (param array or undefined), including the base path.

18. How do you build getStaticPaths paths for a catch-all route [...slug]?

    Each params value must be an array of strings, e.g. paths: [ { params: { slug: ['a', 'b'] } }, { params: { slug: ['a'] } } ]. The array elements correspond to the path segments.

19. Can you use getServerSideProps with dynamic and catch-all routes?

    Yes. getServerSideProps receives context.params where the dynamic segment is a string (for [id]) or an array (for [...slug] / [[...slug]]). getStaticPaths is not used with getServerSideProps since paths are resolved per request.

20. What is the return option 'notFound' used for in getStaticProps/getServerSideProps?

    Returning { notFound: true } makes the page return a 404 status and render the 404 page, even if the route matched. It is used when requested data does not exist.

21. What is the 'redirect' return option in getStaticProps/getServerSideProps?

    Returning { redirect: { destination: '/login', permanent: false } } sends the user to another route. permanent: true uses a 308 (permanent) redirect; false uses a 307 (temporary) redirect for SEO signaling.

22. For which routing/data method is the client informed of a loading state, and how is it checked?

    With getStaticPaths fallback: true, a not-yet-generated page shows a loading fallback. It is checked via useRouter().isFallback, which is true while getStaticProps runs in the background and false once real props arrive.

23. Why can't you import getStaticProps or getServerSideProps data-fetching code that uses server-only modules into client components?

    getStaticProps and getServerSideProps run only on the server and are stripped from the client bundle by Next.js. You can safely use server-only modules (fs, database drivers, secrets) inside them, but that code must not be imported into client-rendered components.

24. Which advanced feature would you choose for a blog with thousands of posts that update occasionally: SSG with fallback, pure SSR, or client-side fetching, and why?

    SSG with getStaticPaths (fallback: true or 'blocking') plus ISR (revalidate). It pre-renders popular posts at build time, generates others on demand, and periodically revalidates content, giving fast static delivery with fresh data and good SEO without rebuilding for every post.

What this deck covers

Advanced Features flashcards FAQ