NextJS Advanced Features Syllabus

Advanced Features syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Advanced Features in NextJS, not a summary of it.

1. 1

   Data Fetching

   4 topics

   • getStaticProps
   • getServerSideProps
   • getStaticPaths
   • Client-side Data Fetching
2. 2

   API Routes

   3 topics

   • Creating API Endpoints
   • Middleware
   • Handling Requests and Responses
3. 3

   Dynamic Routing

   3 topics

   • Dynamic Routes with getStaticPaths
   • Catch-All Routes
   • Optional Catch-All Routes

Advanced Features flashcards for NextJS

21 of 50 cards from the Advanced Features deck — real questions with worked answers.

1. What is getStaticProps in Next.js and when does it run?

   getStaticProps is a function you export from a page to fetch data at build time (Static Site Generation). It runs only on the server at build time, never on the client, and its returned props are used to pre-render the page into static HTML.

2. What must getStaticProps return, and in what shape?

   It must return an object with a props key (a serializable object passed to the page component), e.g. return { props: { data } }. It may also optionally include revalidate, notFound, or redirect keys.

3. How does Incremental Static Regeneration (ISR) work with getStaticProps?

   You add a revalidate key (in seconds) to the returned object, e.g. return { props, revalidate: 60 }. Next.js re-generates the page in the background at most once every 60 seconds when a request comes in, keeping static content fresh without a full rebuild.

4. Can getStaticProps access the incoming request (req/res) or query parameters?

   No. Because it runs at build time, it has no access to the incoming request, response, or query string. It receives a context object with params, preview, previewData, locale, etc., but not req/res or query.

5. What is getServerSideProps and when does it run?

   getServerSideProps is a function exported from a page that fetches data on every request (Server-Side Rendering). It runs on the server for each request at request time, and the page is rendered fresh with the returned props.

6. What context properties are available in getServerSideProps that are NOT in getStaticProps?

   getServerSideProps receives req and res (the HTTP request/response objects) and query (the query string parameters), in addition to params, resolvedUrl, and locale. These enable request-specific data like cookies, headers, and authentication.

7. Compare getStaticProps vs getServerSideProps in terms of when they run and caching.

   getStaticProps runs at build time, producing cacheable static HTML (optionally revalidated via ISR). getServerSideProps runs on every request at request time, producing fresh but non-CDN-cacheable HTML by default. Static is faster/cheaper; server-side is for per-request/personalized data.

8. What is getStaticPaths and why is it required for dynamic SSG pages?

   getStaticPaths is exported from a dynamic route page (e.g. [id].js) that uses getStaticProps. It tells Next.js which dynamic path values to pre-render at build time, since Next.js cannot otherwise know which paths exist for a dynamic segment.

9. What two keys must getStaticPaths return?

   It must return an object with paths (an array of path objects, each like { params: { id: '1' } }) and fallback (a boolean, 'blocking', or false).

10. What does fallback: false mean in getStaticPaths?

    Only the paths returned by getStaticPaths are pre-rendered. Any path not in that list returns a 404 page. Use it when you know all possible paths at build time.

11. What does fallback: true mean in getStaticPaths?

    Paths not generated at build time are NOT 404. On first request Next.js serves a fallback (loading) version of the page, runs getStaticProps in the background, then serves and caches the fully rendered page for subsequent requests. The page must handle router.isFallback.

12. What does fallback: 'blocking' mean in getStaticPaths?

    Paths not pre-rendered are server-rendered on first request (like SSR) with no loading/fallback state; the user waits for the HTML, which is then cached for future requests. No router.isFallback handling is needed.

13. How do you detect and handle a fallback page while it is being generated (fallback: true)?

    Use const router = useRouter(); if (router.isFallback) { return <div>Loading...</div>; }. This renders a placeholder until getStaticProps completes and provides the real props.

14. What is the params shape inside a paths entry in getStaticPaths?

    Each entry is { params: { <segmentName>: <stringValue> } }, e.g. for pages/posts/[id].js you return { params: { id: '1' } }. Param values must be strings (matching the file name of the dynamic segment).

15. What is client-side data fetching and when is it preferred over getStaticProps/getServerSideProps?

    Client-side data fetching loads data in the browser after the page renders (e.g. in useEffect or with SWR/React Query). It is preferred for user-specific, frequently-updating, or non-SEO-critical data such as dashboards, where the data need not be pre-rendered.

16. What is SWR and what does its name stand for?

    SWR is a React data-fetching hook library from Vercel. The name comes from stale-while-revalidate: it returns cached (stale) data first, then revalidates in the background, then updates with fresh data.

17. Show a basic SWR usage pattern for client-side fetching.

    const fetcher = url => fetch(url).then(r => r.json()); const { data, error, isLoading } = useSWR('/api/user', fetcher); Then render loading, error, or data states accordingly.

18. What are the trade-offs of client-side fetching regarding SEO and initial load?

    Client-side fetching sends an initial page without the data, so search engines may not index the data and users see a loading state first (worse perceived performance / SEO). Pre-rendering (SSG/SSR) includes data in the HTML for better SEO and first paint.

19. How do you create an API endpoint in the Next.js Pages Router?

    Create a file inside the pages/api directory that exports a default handler function, e.g. pages/api/hello.js exporting function handler(req, res) { res.status(200).json({ name: 'John' }) }. It becomes accessible at /api/hello.

20. What is the signature of a Next.js API route handler?

    export default function handler(req, res) { ... }, where req is an extended http.IncomingMessage and res is an extended http.ServerResponse (NextApiRequest and NextApiResponse in TypeScript).

21. Do Next.js API routes run on the client bundle?

    No. API routes are server-side only; their code is never included in the client-side JavaScript bundle. This makes them safe for secrets, database access, and sensitive logic.

See more Advanced Features flashcards →

Planning Advanced Features for NextJS

Advanced Features (NextJS) FAQ