How to get started with Next.js for React applications

Short answer

Next.js is a React framework that adds file-system routing, server-side rendering, static site generation, API routes, and now the React Server Components-based App Router.

How it works

Create a page in the app or pages directory, and Next.js automatically handles the route. Data fetching methods like getServerSideProps (Pages Router) or async Server Components (App Router) let you choose the rendering strategy per page.

Example

// app/page.js (App Router)
async function HomePage() {
  const data = await fetch('https://api.example.com/posts', { cache: 'no-store' });
  const posts = await data.json();

  return (
    <main>
      <h1>Blog</h1>
      {posts.map((post) => (
        <article key={post.id}>{post.title}</article>
      ))}
    </main>
  );
}

Tips

• Use the App Router for new projects to leverage Server Components and nested layouts.
• Use next/image and next/font for automatic optimization.
• Deploy to Vercel for the simplest hosting experience, or self-host with next start.