Getting Started with Next.js 14

Next.js 14 introduces a powerful App Router that changes how you think about routing and data fetching. Instead of the old pages/ directory, you now work inside app/ — and everything is a React Server Component by default.

Setting up your first project

Run the following to scaffold a new app:

npx create-next-app@latest my-blog --typescript --tailwind --app

The CLI will ask a few questions. Accept the defaults and you'll have a working project in under a minute.

File-based routing

Every folder inside app/ becomes a URL segment. A file named page.tsx inside that folder is the page component that renders for that route.

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

Server vs Client Components

By default every component is a Server Component — it runs only on the server and sends plain HTML. This means faster initial loads and no unnecessary JavaScript shipped to the browser.

When you need interactivity (event handlers, useState, useEffect), add "use client" at the top of the file. That's the only change required.

Data fetching

Server Components can be async functions. Fetch your data directly inside the component — no getServerSideProps, no useEffect:

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  return <article>{post.content}</article>;
}

This is the mental model shift Next.js 14 introduces: components own their data needs, and the framework handles the rest.