ReviseAlgo Logo

Interview

Cheatsheet

Review the most important Next.js App Router syntax, rendering decisions, data patterns, auth rules, SEO APIs, performance checks, and deployment commands.

1. Learning Objectives

By the end of this cheatsheet, you will be able to quickly recall the key Next.js APIs, file conventions, rendering choices, data patterns, and production checks from the full course.

Difficulty: Intermediate.

2. Prerequisites

  • Completion of the Next.js course.
  • Basic React and TypeScript familiarity.

    • 3. Overview

    Use this page as the final revision pass before building projects, taking interviews, or reviewing a Next.js pull request.

    4. Why This Topic Matters

    Next.js has a lot of surface area. A compact cheatsheet helps you choose the right pattern under pressure.

    5. Real-World Analogy

    A cheatsheet is a map legend. It does not replace the map, but it helps you decode the symbols quickly.

    6. File Conventions

    FilePurpose
    page.tsxRoute UI and public route entry.
    layout.tsxShared persistent UI.
    template.tsxShared UI that remounts on navigation.
    loading.tsxLoading UI for a route segment.
    error.tsxClient error boundary for a segment.
    not-found.tsxNot found UI.
    route.tsHTTP endpoint / Route Handler.

    7. Routing Cheatsheet

    8. Visual Diagram

    9. Server vs Client Components

    NeedUse
    Fetch DB/API dataServer Component
    Read secretsServer Component
    Reduce browser JavaScriptServer Component
    onClick, onChangeClient Component
    useState, useEffectClient Component
    window, localStorageClient Component

    10. Rendering Decisions

    SituationStrategy
    Stable public contentSSG
    Public content with periodic updatesISR / revalidation
    Personalized user dataDynamic SSR
    Slow section inside fast shellStreaming with Suspense
    Browser-only widgetClient Component

    11. Data Fetching

    12. Mutations

    Mutation TypeUse
    App form submitServer Action
    External webhookRoute Handler
    Public APIRoute Handler
    Upload endpointRoute Handler

    13. Authentication Rules

    RuleWhy
    Middleware/proxy can redirect earlyBetter UX and coarse gating.
    Server code must recheck authProtects actual data access.
    Scope queries by user/tenantPrevents cross-account leaks.
    Keep secrets server-onlyAvoids browser exposure.

    14. SEO Cheatsheet

    NeedFile / API
    Static metadatametadata export
    Dynamic metadatagenerateMetadata
    Sitemapsitemap.ts
    Robotsrobots.ts
    OG imageopengraph-image.tsx

    15. Debugging Exercise

    Bug report: "A page became slow after adding one interactive search box to the root layout."

    Solution

    The root layout may have become a broad Client Component. Keep the layout server-rendered and move only the search box into a small Client Component.

    16. Performance Checklist

  • Use next/image with dimensions and priority for LCP images.
  • Use next/font for font loading.
  • Lazy-load non-critical widgets.
  • Keep client boundaries small.
  • Move static heavy work to Server Components.
  • Check production build output before release.

    • 17. Deployment Checklist

    NeedPattern
    Vercel deployFramework preset and build logs.
    Docker deployoutput: "standalone".
    Private envprocess.env.SECRET_NAME.
    Browser envNEXT_PUBLIC_NAME.
    Runtime envRead in server execution, not public build output.

    18. Quick Quiz

    1. What file creates an API route? Answer: route.ts. 2. What component type is default? Answer: Server Component. 3. What prefix exposes env vars to browser bundles? Answer: NEXT_PUBLIC_. 4. What method handles a missing record? Answer: notFound(). 5. What keeps route UI persistent? Answer: layout.tsx.

    19. Summary & Key Takeaways

  • App Router is file-system routing plus server-first rendering.
  • Server Components are the default and should carry most data work.
  • Client Components are for interactivity and browser APIs.
  • Rendering strategy depends on freshness, personalization, and SEO.
  • Production readiness includes metadata, performance, env vars, and build checks.

    • 20. Master Cheatsheet

    ProblemDefault Move
    Need route UIpage.tsx
    Need shared shelllayout.tsx
    Need browser eventsSmall Client Component
    Need server mutationServer Action
    Need webhookRoute Handler
    Need dynamic SEOgenerateMetadata
    Need fast public contentSSG/ISR
    Need private user dataDynamic server rendering
    Need smaller bundleMove work server-side
    Need deploy confidencenpm run build

    21. Further Reading

  • Next.js Docs: Server and Client Components.
  • Next.js Docs: Caching.
  • Next.js Docs: Deploying.
  • Next.js Docs: Version 16 Upgrade Guide.

    • 22. Next Lesson Preview

    The Next.js course is complete. Revisit the projects and machine coding prompts when you want hands-on reinforcement.