Getting Started with Next.js 15

nextjstypescriptwebdev

Next.js 15 brings a number of improvements to the App Router, better caching defaults, and tighter TypeScript integration. Here's how to get up and running.

Creating a new project

The fastest way to start is with create-next-app:

pnpm create next-app my-app --typescript

This scaffolds a project with TypeScript, ESLint, and Tailwind CSS configured out of the box.

App Router basics

The App Router uses a file-system-based routing convention. Every page.tsx file inside src/app becomes a route. A layout.tsx wraps routes at any level.

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

Static generation

Pages are statically generated by default. For dynamic routes, export generateStaticParams to tell Next.js which paths to pre-render at build time.

export const generateStaticParams = async () => {
  const slugs = getSlugs();
  return slugs.map((slug) => ({ slug }));
};

That covers the essentials. The Next.js docs are thorough if you want to go deeper on any of these topics.