Run the official generator. Do not click through the prompts blindly; the flags below are the choices that matter.

npx create-next-app@latest my-app --typescript --eslint --app
cd my-app

• --typescript is not optional for me. The first time a refactor would have silently broken three call sites, types pay for themselves.
• --app selects the App Router, which gives you Server Components by default. That is the single biggest lever for shipping less JavaScript to the browser.
• --eslint wires up linting from the first commit, so problems surface while they are cheap to fix.

npm run dev

Open http://localhost:3000. You should see the starter page. If the dev server starts and the page loads, your toolchain is healthy and you can build on it.

Decide where things live now, because retrofitting structure hurts. The rule:

A shape that scales:

app/            routes, layouts, route handlers only
components/     reusable UI
lib/            data access, validation, integrations, types
content/        markdown / data, kept out of app/
public/         static assets

The point is that app/ never becomes the place business logic hides. When you need to find how something works, you look in lib/, not in a route file.

Server Components are the default in the App Router. Use that: fetch data on the server, send the browser only what it needs.

// A Server Component by default. No "use client" here.
export default async function Page() {
  const message = await getWelcome();
  return <h1>{message}</h1>;
}
 
async function getWelcome() {
  // Runs on the server. Secrets, database calls, and heavy work stay here.
  return "Hello from the server";
}

When you genuinely need interactivity, push "use client" as far down the tree as possible:

"use client"; // now the whole page ships to the browser
export default function Page() {
  /* ... */
}

"use client"; // only this button is client code
export function LikeButton() {
  /* ... */
}