Back to Home
Next.js logoNext.js v15.xINTERMEDIATE

Next.js Fundamentals

Complete guide to Next.js 14/15 with App Router, Server Components, Server Actions, and more

20 min read
nextjsreactssrapp-routerserver-componentsrsctypescript

Project Setup & Structure

Create new Next.js app

📄 Codebash
💡 Use --typescript flag for TypeScript support
⚡ --tailwind adds Tailwind CSS automatically
📌 --app uses the App Router (recommended)
🟢 --src-dir creates a src/ directory

App Router file structure

📄 Codetext
💡 page.tsx defines a route
⚡ layout.tsx wraps pages and preserves state
📌 loading.tsx shows while page loads
🔥 error.tsx handles errors with error boundary

Configuration files

📄 Codejavascript
💡 next.config.js for Next.js configuration
⚡ TypeScript config is auto-generated
📌 .env.local for environment variables
🟢 middleware.ts runs before requests

Routing & Navigation

Basic routing

📄 Codetypescript
💡 Folders define routes, page.tsx makes them accessible
⚡ Nested folders create nested routes
📌 Use Link component for client-side navigation
🔥 Route groups with () don't affect URL

Dynamic routes

typescript
💡 [param] for dynamic segments
⚡ [...slug] for catch-all routes
📌 [[...slug]] for optional catch-all
🟢 Access params in page components

Link component & navigation

📄 Codetypescript
💡 Link enables client-side navigation
⚡ Prefetches links in viewport automatically
📌 Use router.push() for programmatic navigation
🔥 usePathname() gets current path

Server & Client Components

Server Components (default)

📄 Codetypescript
💡 Components are Server Components by default
⚡ Can fetch data directly with async/await
📌 Reduces JavaScript sent to client
🔥 Cannot use browser APIs or event handlers

Client Components

📄 Codetypescript
💡 Add "use client" directive at top
⚡ Can use hooks, browser APIs, event handlers
📌 Still pre-rendered on server (SSR)
🟢 Import Server Components as children, not directly

When to use Server vs Client

📄 Codetypescript
💡 Default to Server Components
⚡ Client for interactivity and browser APIs
📌 Server for data fetching and backend access
🔥 Keep Client Components small and focused

Data Fetching

Fetching in Server Components

📄 Codetypescript
💡 Use async/await directly in components
⚡ Automatic request deduplication
📌 Built-in fetch caching
🟢 Can fetch in parallel with Promise.all

Caching strategies

typescript
💡 force-cache: Cache until manually invalidated (default)
⚡ no-store: Always fetch fresh data
📌 revalidate: Time-based revalidation
🔥 on-demand revalidation with revalidatePath/Tag

Loading & streaming

📄 Codetypescript
💡 loading.tsx shows while data loads
⚡ Suspense for granular loading states
📌 Streaming allows progressive rendering
🟢 Skeleton UI improves perceived performance

Server Actions

Creating Server Actions

📄 Codetypescript
💡 Functions that run on server, called from client
⚡ Replace API routes for mutations
📌 Use "use server" directive
🔥 Automatically handle form submissions

Using Server Actions in forms

📄 Codetypescript
💡 Works with native form action attribute
⚡ Progressive enhancement without JS
📌 useFormStatus for pending states
🟢 useActionState for form state management

Client-side Server Actions

typescript
💡 Call Server Actions from Client Components
⚡ Use with onClick handlers
📌 Handle loading and error states
🔥 Optimistic updates for better UX

API Routes

Route handlers

📄 Codetypescript
💡 Create API endpoints with route.ts files
⚡ Support all HTTP methods
📌 Can be static or dynamic
🔥 Full access to Request/Response APIs

Dynamic route handlers

typescript
💡 Access route params in API routes
⚡ Search params available via URL
📌 Combine with database queries
🟢 Type-safe with TypeScript

Middleware

Creating middleware

📄 Codetypescript
💡 Runs before every request
⚡ Place middleware.ts in root or src/
📌 Can modify request/response
🟢 Use for auth, redirects, headers

Authentication middleware

typescript
💡 Protect routes with auth checks
⚡ Redirect unauthenticated users
📌 Work with JWT tokens
🔥 Integration with auth libraries

Image Optimization

Next.js Image component

📄 Codetypescript
💡 Automatic optimization and lazy loading
⚡ Responsive images with srcset
📌 Prevents layout shift with dimensions
🔥 Supports blur placeholder

Deployment

Vercel deployment

📄 Codebash
💡 Zero-config deployment for Next.js
⚡ Automatic CI/CD from Git
📌 Preview deployments for PRs
🟢 Edge functions and analytics

Environment variables

📄 Codetypescript
💡 .env.local for local development
⚡ NEXT_PUBLIC_ prefix for client-side
📌 Runtime vs build-time variables
🟢 Validation with zod or t3-env

Performance Optimization

Bundle optimization

📄 Codetypescript
💡 Analyze bundle with @next/bundle-analyzer
⚡ Code splitting happens automatically
📌 Dynamic imports for lazy loading
🔥 Tree shaking removes unused code