Next.
js — The Ultimate Mega Cheat
Sheet
[Link] is a full-stack React framework built by Vercel that enables
server-side rendering, static site generation, routing, API routes,
performance optimizations, and production-grade deployments
1. What is [Link]?
[Link] is a React framework that extends React with:
Routing
Rendering strategies
Backend capabilities
Performance optimizations
Why [Link]?
SEO-friendly rendering
Zero-config routing
Full-stack support
Edge & serverless ready
2. [Link] vs React (CRA/Vite)
Feature React [Link]
Routing Manual File-based
SSR ❌ ❌
SSG ❌ ❌
API Routes ❌ ❌
SEO Limited Excellent
Feature React [Link]
Performance Depends Optimized
3. Rendering Strategies (Core Concept)
1. CSR (Client-Side Rendering)
Rendered in browser
Poor SEO initially
2. SSR (Server-Side Rendering)
Rendered on every request
Great SEO
3. SSG (Static Site Generation)
Rendered at build time
Extremely fast
4. ISR (Incremental Static Regeneration)
Rebuild pages after deployment
4. Creating a [Link] App
npx create-next-app@latest my-app
cd my-app
npm run dev
With TypeScript:
npx create-next-app@latest my-app --typescript
5. Project Structure (App Router)
app/
├─ [Link]
├─ [Link]
├─ [Link]
├─ [Link]
├─ [Link]
├─ [Link]
└─ api/
6. Pages Router vs App Router
Feature Pages Router App Router
Introduced Old Next 13+
Data Fetching getServerSideProps fetch + cache
Layouts Manual Built-in
Streaming ❌ ❌
7. File-Based Routing
app/blog/[Link] → /blog
app/blog/[slug]/[Link] → /blog/hello
Route Segments
Static
Dynamic [id]
Catch-all [...slug]
8. Layouts (Nested Layouts)
export default function Layout({ children }) {
return <main>{children}</main>;
}
Layouts persist between navigations.
9. Pages
export default function Page() {
return <h1>Hello [Link]</h1>;
}
10. Metadata & SEO
export const metadata = {
title: 'Home',
description: '[Link] App'
};
Dynamic Metadata:
export async function generateMetadata() {}
11. Navigation (next/link)
import Link from 'next/link';
<Link href="/about">About</Link>
Client-side navigation by default.
12. useRouter & usePathname
import { useRouter, usePathname } from 'next/navigation';
13. Loading UI (Streaming)
export default function Loading() {
return <p>Loading...</p>;
}
14. Error Handling
'use client';
export default function Error({ error, reset }) {}
15. Not Found Page
export default function NotFound() {}
16. Data Fetching (App Router)
const data = await fetch(url, { cache: 'no-store' });
Caching Strategies:
force-cache
no-store
revalidate
17. Server Components (Default)
Run on server
Zero JS sent to client
Secure by default
18. Client Components
'use client';
Required for:
State
Effects
Event handlers
19. Server Actions (Next 13+)
'use server';
export async function createPost(formData) {}
20. Forms with Server Actions
<form action={createPost}>
No API needed.
21. API Routes
export async function GET() {}
export async function POST() {}
Runs on server.
22. Middleware
export function middleware(request) {}
Runs before request.
23. Authentication Patterns
NextAuth / [Link]
Middleware-based auth
JWT & cookies
24. Environment Variables
.[Link]
NEXT_PUBLIC_API_URL
25. Image Optimization
import Image from 'next/image';
Features:
Lazy loading
Responsive sizes
26. Fonts (next/font)
import { Inter } from 'next/font/google';
27. CSS in [Link]
Global CSS
CSS Modules
Tailwind CSS
Styled-components
28. Static Assets
public/
29. Incremental Static Regeneration (ISR)
export const revalidate = 60;
30. Caching & Performance
Request memoization
Route segment caching
Streaming
31. Edge Runtime
export const runtime = 'edge';
32. Internationalization (i18n)
Locale routing
Middleware
33. Deployment (Vercel)
git push
Zero-config deploy.
34. Production Best Practices
Use Server Components
Optimize images
Cache aggressively
35. Common Mistakes
Overusing client components
Fetching in useEffect
Ignoring caching
36. Security
HTTP-only cookies
CSRF protection
Middleware auth
37. Testing [Link]
Jest
Playwright
Cypress
38. [Link] with TypeScript
Typed routes
Typed params
39. Folder Architecture (Scalable Apps)
app/
├─ (auth)/
├─ dashboard/
├─ api/
└─ [Link]
40. [Link] Interview Cheat Sheet
SSR vs SSG vs ISR
Server vs Client Components
Middleware
Server Actions
41. [Link] Boilerplate
export default function Page() {
return <main>Hello [Link]</main>;
}
42. Final Notes
[Link] enables:
Full-stack React apps
High performance
SEO-first architecture
