Bootstrapping

$$code:bash:Create and run a Next.js project npx create-next-app@latest my-app cd my-app npm run dev # starts on http://localhost:3000 $$

Project Structure

my-app/ ├── app/ # App Router (your routes live here) │ ├── layout.tsx # Root layout (required) — wraps everything │ ├── page.tsx # Home page (/) │ ├── loading.tsx # Loading UI for / │ ├── error.tsx # Error boundary for / │ ├── not-found.tsx # Custom 404 │ ├── global-error.tsx # Catches root layout errors │ ├── about/ │ │ └── page.tsx # /about │ ├── blog/ │ │ ├── page.tsx # /blog │ │ └── [slug]/ │ │ └── page.tsx # /blog/:slug │ └── api/ │ └── route.ts # API endpoint ├── public/ # Static assets (images, favicon) ├── next.config.ts # Next.js configuration (TS supported) ├── package.json └── tsconfig.json

The Root Layout

Every Next.js app must have app/layout.tsx. It wraps all routes and must include <html> and <body> tags:

$$code:tsx:app/layout.tsx — required root layout import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import './globals.css'; const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'My App', description: 'Built with Next.js', }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } $$

Turbopack — The Default Bundler

As of Next.js 16, Turbopack is the default bundler (replacing Webpack). Written in Rust, it delivers dramatically faster development:

3.8× faster cold starts than Webpack
~9× faster Hot Module Replacement
2.3× faster production builds
File system caching (disk persistence) for even faster subsequent starts

💡 Turbopack is stable for both dev and production since Next.js 16.0. You no longer need the --turbopack flag — it's on by default.