Setting Up Your First Next.js + TypeScript Project

What we're actually building here

Nothing fancy - just a Next.js project with TypeScript wired up correctly, the App Router doing the routing, and one custom page you've written yourself so you can see the pieces fit together.

Step 1 – Scaffold it

Run the command below in your terminal. When it asks whether you want TypeScript, say yes - trust me, it saves you a headache later.

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

Step 2 – Get a feel for the App Router

Next.js routes everything based on the app/ folder. Each nested folder becomes a URL segment, and dropping a page.tsx inside any of them is what actually exposes that route publicly.

app/
  page.tsx        → /
  about/
    page.tsx      → /about
  blog/
    [slug]/
      page.tsx    → /blog/:slug

Step 3 – Write a typed page

Create app/about/page.tsx and export a plain React component as the default export. TypeScript figures out the return type on its own - you don't need to annotate anything extra.

export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>Welcome to our site.</p>
    </main>
  );
}

Step 4 – Fire it up

Start the dev server and check http://localhost:3000/about - that's your new page.

npm run dev

What comes next

Once this feels comfortable, try wiring up MongoDB with Mongoose, and then build your first API route handler. Both are covered separately on this site.