Creating a Next.js app

Knowing the default setup and project layout makes every later Next.js concept easier to place.

Create a project with npx create-next-app@latest my-app. The recommended defaults give you TypeScript, ESLint, Tailwind CSS, the App Router, Cache Components (Next.js 16's caching model) and an AGENTS.md file for coding assistants, with the @/* import alias pointing at the project root.

Scripts in package.json:

next dev — development server with Fast Refresh, using Turbopack (the default bundler since Next.js 16).
next build — production build: compiles, prerenders what it can and reports each route.
next start — runs the production server.

Key folders and files:

app/ — the App Router. Folders become URL segments; special files like page.tsx and layout.tsx define the UI. app/layout.tsx is the required root layout containing <html> and <body>.
public/ — static files served from / (e.g. public/logo.svg at /logo.svg).
next.config.ts — framework configuration, typed with NextConfig.
.env* files — environment variables.

There is also the older Pages Router (pages/ directory). It is still supported, but new projects should use the App Router, which is what this curriculum covers.

Next.js runs on React 19 and makes Server Components the default: components in app/ render on the server unless you opt into the client. Keep that in mind from day one.

Example

// Terminal
// npx create-next-app@latest my-app     (accept the recommended defaults)
// cd my-app && npm run dev               -> http://localhost:3000

// app/layout.tsx - the root layout wraps every page
import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = { title: 'My App' }

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

// app/page.tsx - the page at "/"
export default function Home() {
  return <h1>Hello, Next.js!</h1>
}

Remember

create-next-app defaults: TypeScript, Tailwind, ESLint, App Router, Turbopack, Cache Components
app/ holds routes; app/layout.tsx is the required root layout with html and body
next dev, next build, next start are the core commands

Watch out for

Mixing tutorials for the Pages Router (pages/, getServerSideProps) with an App Router project.

Check yourself

Which file must exist at the top of the app directory and render <html> and <body>?

Official docs: nextjs.org/docs/app/getting-started/installation