Next.js has evolved from “React with server‑side rendering” into a full‑stack web framework powering everything from hobby blogs to global e‑commerce sites. Version 15 (released October 2024) stabilised Server Actions, switched the dev server to Turbopack (a Rust‑based bundler) for instant HMR, and introduced better hydration‑error overlays.
If you last looked at Next.js during the Pages Router era, think of the modern stack like this:
| Layer | Purpose |
|---|---|
| React Server Components (RSC) | Stream HTML + minimal JS, near‑instant TTI |
| App Router | File‑based routing with nested layouts, loading/error UI and fetch boundaries |
| Server Actions & Edge Middleware | Mutate data or run auth logic without separate API routes |
| Turbopack | Rust bundler that replaces Webpack in development, 10‑20× faster HMR |
This guide takes you from zero to production, covers rendering modes, data handling, performance, SEO and deployment options—sprinkled with tips from real Melbourne projects.
1. Prerequisites & Project Bootstrap
- Install Node ≥ 20 LTS and your favourite package manager (npm, pnpm or Yarn classic).
- Scaffold the project:
npx create-next-app@latest my-next-app --typescript --src-dir --import-alias "@/*" --eslint --tailwind
The flags above give you TypeScript, a /src directory, absolute imports and Tailwind CSS out of the box—saving a day of yak‑shaving.
Tip: Behind a corporate proxy? Add
--use-npmto avoid pnpm network headaches.
2. Folder Anatomy (App Router)
src/
└─ app/
├─ layout.tsx # Root layout (HTML shell)
├─ page.tsx # Route: /
├─ about/
│ └─ page.tsx # Route: /about
├─ blog/
│ ├─ [slug]/
│ │ ├─ page.tsx # Dynamic route: /blog/:slug
│ │ └─ loading.tsx # Suspense fallback
│ └─ sitemap.ts # Generates <sitemap.xml>
└─ api/
└─ stripe/route.ts # Serverless function in 6 lines
- Every directory can declare its own
layout.tsx, creating nested layouts and automatic<head>tags. loading.tsxanderror.tsxhook into Suspense for granular UX.- Route Handlers (
route.ts) replace most REST endpoints—think Express‑lite inside the framework.
3. Rendering Strategies
| Mode | Best for | How to opt‑in |
|---|---|---|
| React Server Components | Most UI; zero client bundle | Default—just omit "use client" |
| SSR (dynamic) | Authenticated dashboards, per‑request data | export const dynamic = "force-dynamic" |
| SSG (static) | Brochure pages that rarely change | export const revalidate = Infinity |
| ISR (hybrid) | Blogs/products that update hourly | export const revalidate = 3600 |
| CSR | Heavy client interactivity (maps) | Add "use client" at top of the component |
4. Data Fetching Patterns
fetch() in Server Components
// app/products/[id]/page.tsx
import { Metadata } from "next";
import { getProduct } from "@/lib/api";
export async function generateMetadata({ params }): Promise<Metadata> {
const product = await getProduct(params.id);
return { title: product.title, description: product.summary };
}
export default async function ProductPage({ params }) {
const product = await getProduct(params.id); // Runs ONLY on the server
return <ProductView product={product} />;
}
- Executes on the server, streams HTML—no REST round‑trip to the browser.
- Secure tokens or DB credentials stay hidden.
Server Actions
"use server";
import { db } from "@/lib/db";
export async function addToCart(productId: string) {
await db.cart.create({ data: { productId, qty: 1 } });
}
Call from a client component via formAction={addToCart} and enjoy an optional no‑JS fallback.
5. Styling & Assets
- CSS Modules (
Button.module.css) for local scope. - Tailwind CSS for utility‑first workflow (included in template).
- @next/font loads Google or self‑hosted fonts with
font-display: swap. - next/image serves AVIF/WebP, auto‑generates
srcset, includes blur placeholders.
6. Performance Checklist (Core Web Vitals)
- Largest Contentful Paint < 2.5 s → optimise hero images with
next/image. - First Input Delay < 100 ms → keep bundles small; prefer RSC.
- Cumulative Layout Shift < 0.1 → reserve space for images, avoid late CSS injection.
- Enable Turbopack in production (
experimental.turbopack = true) once stable—expect 10–40 % faster builds.
7. SEO with the App Router
| Concern | Implementation |
|---|---|
| Meta tags | Export metadata from any layout/page (supports dynamic titles & OG images). |
| Structured data | Embed <script type="application/ld+json"> in a server component. |
| Sitemap / robots | Add sitemap.ts and robots.ts under app/, generate statically or on the fly. |
| Canonical / hreflang | Use the alternates field in the metadata export. |
| Analytics | The built‑in <Script> component supports lazy GA4 loading or local analytics. |
8. Testing & Observability
- Unit / Integration: Jest + React Testing Library with
@testing-library/next-routermocks. - E2E: Playwright or Cypress 13+.
- Lint / Type‑safety: ESLint, TypeScript strict mode,
next lint. - OpenTelemetry: Next 15 exposes an instrumentation hook—pipe traces into Datadog, Grafana or New Relic.
9. Deployment Options
| Platform | Pros | Cons | Best when |
|---|---|---|---|
| Vercel | One‑click, edge network in 38 regions, PR previews, native ISR | Free tier caps (100 GB‑hrs) | You want the canonical Next.js experience |
| Netlify | Functions + On‑demand Builders (ISR equivalent), generous free tier | Slight lag adopting cutting‑edge Next features | Mixed frameworks or lower cost |
| AWS (CDK, Lambda@Edge, S3) | Infinite scaling, regional control, private VPCs | Steeper setup curve | Enterprise compliance or multi‑region data |
For Melbourne‑centric latency, Vercel’s edge network serves HTML from the Sydney PoP, typically sub‑100 ms TTFB.
10. CI/CD & Environment Management
- Store secrets in
.env.local; never commit. - Use Vercel Environments (
Development,Preview,Production) or Netlify’s_BUILD_CONTEXT. - Gate merges with Playwright smoke tests + Lighthouse budget script.
- Automate DB migrations (Prisma) in Vercel’s build step.
11. 30‑Day Roadmap
| Day | Milestone |
|---|---|
| 1–2 | Scaffold project, push to GitHub & Vercel preview |
| 3–7 | Build core pages with RSC; implement root layout |
| 8–12 | Add dynamic routes (/blog/[slug]), set ISR revalidate 1 h |
| 13–16 | Integrate Prisma/Postgres on Neon; expose Server Actions |
| 17–20 | Style with Tailwind & next/image, hit 90+ Lighthouse |
| 21–24 | Add metadata, sitemap, structured data |
| 25–27 | Write Playwright tests; wire up GitHub → Vercel CI |
| 28–30 | Soft‑launch, monitor analytics, iterate on CWV |
12. Common Pitfalls
- Hydration mismatches → ensure server & client markup match; use
suppressHydrationWarningsparingly. - Large third‑party scripts → load via
<Script strategy="afterInteractive">, not in<head>. - Stateful client comps in layouts → mark them
"use client"and isolate errors. - ISR race conditions → guard against overlapping re‑renders in fetch logic.
- Over‑fetching → cache responses (
fetch(..., { next: { revalidate: 3600 } })).
Conclusion
Next.js 15 unifies full‑stack logic, performance best‑practices and a stellar developer experience under one roof. By mastering App Router, embracing Server Components and picking the right deployment platform, you’ll ship SEO‑friendly, near‑instant experiences without the configuration sprawl of a traditional React + Express stack.
Need help migrating or levelling up? Contact me for a free discovery session. Let’s get your Next.js app production‑ready, optimised and ranking on day one!