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
| File | Purpose |
|---|---|
| `page.tsx` | Route UI and public route entry. |
| `layout.tsx` | Shared persistent UI. |
| `template.tsx` | Shared UI that remounts on navigation. |
| `loading.tsx` | Loading UI for a route segment. |
| `error.tsx` | Client error boundary for a segment. |
| `not-found.tsx` | Not found UI. |
| `route.ts` | HTTP endpoint / Route Handler. |
## 7. Routing Cheatsheet
## 8. Visual Diagram
## 9. Server vs Client Components
| Need | Use |
|---|---|
| Fetch DB/API data | Server Component |
| Read secrets | Server Component |
| Reduce browser JavaScript | Server Component |
| `onClick`, `onChange` | Client Component |
| `useState`, `useEffect` | Client Component |
| `window`, `localStorage` | Client Component |
## 10. Rendering Decisions
| Situation | Strategy |
|---|---|
| Stable public content | SSG |
| Public content with periodic updates | ISR / revalidation |
| Personalized user data | Dynamic SSR |
| Slow section inside fast shell | Streaming with Suspense |
| Browser-only widget | Client Component |
## 11. Data Fetching
## 12. Mutations
| Mutation Type | Use |
|---|---|
| App form submit | Server Action |
| External webhook | Route Handler |
| Public API | Route Handler |
| Upload endpoint | Route Handler |
## 13. Authentication Rules
| Rule | Why |
|---|---|
| Middleware/proxy can redirect early | Better UX and coarse gating. |
| Server code must recheck auth | Protects actual data access. |
| Scope queries by user/tenant | Prevents cross-account leaks. |
| Keep secrets server-only | Avoids browser exposure. |
## 14. SEO Cheatsheet
| Need | File / API |
|---|---|
| Static metadata | `metadata` export |
| Dynamic metadata | `generateMetadata` |
| Sitemap | `sitemap.ts` |
| Robots | `robots.ts` |
| OG image | `opengraph-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
| Need | Pattern |
|---|---|
| Vercel deploy | Framework preset and build logs. |
| Docker deploy | `output: "standalone"`. |
| Private env | `process.env.SECRET_NAME`. |
| Browser env | `NEXT_PUBLIC_NAME`. |
| Runtime env | Read 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
| Problem | Default Move |
|---|---|
| Need route UI | `page.tsx` |
| Need shared shell | `layout.tsx` |
| Need browser events | Small Client Component |
| Need server mutation | Server Action |
| Need webhook | Route Handler |
| Need dynamic SEO | `generateMetadata` |
| Need fast public content | SSG/ISR |
| Need private user data | Dynamic server rendering |
| Need smaller bundle | Move work server-side |
| Need deploy confidence | `npm 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.