Your First Project

What the CLI gives you

One command produces a working app with TypeScript, ESLint, Tailwind (optional), the App Router, and Turbopack on for dev and production:

Path	Purpose
`app/layout.tsx`	Required root layout. Renders `<html>` and `<body>`.
`app/page.tsx`	The `/` route.
`app/globals.css`	Global styles (Tailwind import goes here).
`public/`	Static assets served from root (`/favicon.ico` etc.).
`next.config.ts`	Framework config — written in TypeScript natively.
`tsconfig.json`	TypeScript with the `@/*` import alias preset.

The root layout you can't skip

The root layout has hard requirements: it must render <html> and <body>, and it wraps every route in your app. Common pattern: load fonts here and apply them as a className on <body>.

Turbopack as the default

Since v16, Turbopack is on by default for both next dev and next build. You don't need --turbopack. Reported wins versus Webpack: ~3.8× faster cold start, ~9× faster HMR, ~2.3× faster prod build. File-system cache makes warm starts even faster.

Code

Bootstrap and run·bash

npx create-next-app@latest my-app
cd my-app
npm run dev

Required root layout·tsx

// app/layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: { template: '%s | My App', default: 'My App' },
  description: 'Built with Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

next.config.ts is now TypeScript-native·ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: { reactCompiler: false },
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.example.com' },
    ],
  },
};

export default nextConfig;

What the CLI gives you

The root layout you can't skip

Turbopack as the default

Code

External links

Exercise

Progress

Comments 0