Quiz

## 1. Learning Objectives By the end of this quiz, you will be able to assess your readiness across the full Next.js course and identify topics to review before interviews or project work. Difficulty: Advanced. ## 2. Prerequisites - Completion of Chapters 1 through 9. - Familiarity with App Router file conventions. - Understanding of rendering, data, auth, SEO, performance, and deployment. ## 3. Overview This quiz mixes recall, scenario questions, debugging prompts, and architecture tradeoffs. Answer before opening the solution blocks. ## 4. Why This Topic Matters Quizzes expose fuzzy understanding. If you can explain an answer quickly and correctly, you are much closer to interview and production readiness. ## 5. Real-World Analogy The quiz is a preflight check. It does not fly the plane for you, but it catches missing pieces before takeoff. ## 6. Core Concepts | Quiz Area | Skills Tested | |---|---| | Routing | Route files, dynamic segments, layouts. | | Rendering | SSG, SSR, ISR, CSR, streaming. | | Components | Server/client boundaries and hydration. | | Data | Fetching, Route Handlers, Server Actions. | | Production | Auth, metadata, performance, env vars, deploys. | ## 7. Syntax & API Reference

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? The page fetches post data on the server, then passes serializable props to a client-side interactive component. ## 10. Interactive Playground Score yourself: - 0 to 6 correct: review fundamentals and components. - 7 to 12 correct: review rendering, data, and caching. - 13 to 18 correct: practice scenarios and debugging. - 19+ correct: move to machine coding practice. ## 11. Multiple Choice **1. Which file makes `/dashboard` publicly routable?** A. `app/dashboard/layout.tsx` B. `app/dashboard/page.tsx` C. `app/dashboard/loading.tsx` D. `app/dashboard/template.tsx` Answer B. A `page.tsx` file defines the route's UI and makes the route accessible. **2. Which component type is the default in the App Router?** A. Client Component B. Server Component C. Edge Component D. Static Component Answer B. Layouts and pages are Server Components by default. **3. Which feature should force a Client Component?** A. Reading from a database B. Using a secret API key C. Handling `onClick` D. Generating metadata Answer C. Event handlers require a Client Component. **4. What is `generateStaticParams` used for?** A. Creating API routes B. Prebuilding dynamic route params C. Loading browser state D. Defining middleware matchers Answer B. It returns params for dynamic routes that should be generated ahead of time. **5. What should you use for a payment webhook?** A. Server Action B. Client Component C. Route Handler D. Template Answer C. Webhooks are external HTTP calls and belong in Route Handlers. ## 12. Scenario Questions **6. A marketing page changes once per week and must be very fast. Which rendering strategy fits?** Answer SSG or ISR. Use SSG if rebuilds are acceptable, ISR if content should refresh after a configured interval or on-demand trigger. **7. A dashboard page is personalized per user and reads private workspace data. Which rendering strategy fits?** Answer Dynamic server rendering with server-side auth and workspace checks. Avoid globally caching user-specific data. **8. A page has a fast static shell and a slow recommendations panel. What pattern helps?** Answer Use Server Components with Suspense/streaming so the shell can render while the slower section loads. **9. A Client Component imports a heavy markdown renderer but only displays static content. What should change?** Answer Move the markdown rendering to a Server Component so the heavy library stays out of the browser bundle. ## 13. Debugging Questions **10. Production build fails because `DATABASE_URL` is undefined during module import. What is the likely fix?** Answer Avoid initializing the DB client at module scope. Use lazy initialization inside a function that runs when server code actually needs the client. **11. A route has no loading UI while a child section is slow. What file or component can help?** Answer Use `loading.tsx` for route-level loading, or `` around the slow child. **12. A secret appears in browser JavaScript. What caused it?** Answer It was probably exposed through a `NEXT_PUBLIC_` variable or bundled into a Client Component import path. ## 14. Interview Questions **13. Explain Server Components in one minute.** Answer Server Components render on the server, can fetch data and access secrets, reduce client JavaScript, and can pass serializable props to Client Components for interactivity. **14. Explain the difference between Server Actions and Route Handlers.** Answer Server Actions are server functions for app-owned mutations, often forms. Route Handlers are HTTP endpoints for APIs, webhooks, uploads, or external clients. **15. How would you optimize a slow Next.js page?** Answer Measure first. Reduce client JavaScript, move static work server-side, optimize images/fonts, use caching or revalidation appropriately, stream slow sections, and inspect build/analyzer output. ## 15. Debugging Exercise Bug report: "A preview deployment works, but production uses the wrong public analytics ID." Solution Public variables prefixed with `NEXT_PUBLIC_` are inlined during build. Confirm the production value existed at build time, or move runtime-specific client config behind a server endpoint. ## 16. Practice Exercises - Easy: Score the multiple-choice section without notes. - Medium: Explain each scenario answer out loud. - Hard: Turn one debugging question into a small reproduction and fix it. ## 17. Scenario-Based Challenge You are asked to build a docs site with search, metadata, MDX, nested routes, and static generation in 45 minutes. What is your plan? Walkthrough Create a content registry, generate static params for docs pages, render content through a catch-all route, build sidebar navigation from metadata, add `generateMetadata`, and create a lightweight client search enhancement. ## 18. Quick Quiz 1. What file creates shared UI that persists? Answer: `layout.tsx`. 2. What directive marks a mutation function? Answer: `"use server"`. 3. What prefix exposes env vars to the browser? Answer: `NEXT_PUBLIC_`. 4. What component optimizes images? Answer: `next/image`. 5. What platform auto-detects Next.js projects? Answer: Vercel. ## 19. Summary & Key Takeaways - The final quiz checks concepts, judgment, and debugging. - Server-first architecture is the default mental model. - Client Components should be intentional and small. - Rendering choices depend on freshness, SEO, personalization, and cost. - Production readiness includes env vars, metadata, build checks, and deployment behavior. ## 20. Cheat Sheet | Score Pattern | Review | |---|---| | Routing misses | Fundamentals and App Router chapters. | | Rendering misses | Rendering chapter and performance chapter. | | Component misses | Server and Client Components. | | Mutation misses | Data Fetching chapter. | | Production misses | SEO, deployment, and projects. | ## 21. Further Reading - Next.js Docs: Server and Client Components. - Next.js Docs: Caching. - Next.js Docs: Deploying. ## 22. Next Lesson Preview Next, you will finish with a compact cheatsheet for revision and interview prep.