Next 9 is out!Next 9 is out! — TypeScript, Dynamic Routing, Auto Static Optimization, and more!Learn More →

The React Framework for

ProductionServer-Rendered AppsStatic Websitesthe Enterprisethe Desktopthe Mobile WebLightweight AppsSEO-Friendly SitesPWAsElectron

import Link from 'next/link';

export default function Index() {
  return (
    <div>
      <h1>Hello Next.js 👋</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}

import Link from 'next/link';

export default function About() {
  return (
    <div>
      <p>This is the about page</p>
      <Link href="/">
        <a>Go home</a>
      </Link>
    </div>
  );
}

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "next": "^8.0.0",
    "react": "^16.5.1",
    "react-dom": "^16.5.1"
  }
}

Hello Next.js 👋

This is the about page

import Link from 'next/link';

export default function Index() {
  return (
    <div>
      <h1>Hello Next.js 👋</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}

import Link from 'next/link';

export default function About() {
  return (
    <div>
      <p>This is the about page</p>
      <Link href="/">
        <a>Go home</a>
      </Link>
    </div>
  );
}

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "next": "^8.0.0",
    "react": "^16.5.1",
    "react-dom": "^16.5.1"
  }
}

Hello Next.js 👋

This is the about page

import Link from 'next/link';

export default () => (
  <div>
    <h1>Hello, this is the homepage</h1>
    <p>I'm only 0.59 KB after gzip.</p>
    <Link href="/cowsay">
      <a>Cowsay</a>
    </Link>
  </div>
);

import Link from 'next/link';

// only being loaded on \`/cowsay\`
import cowsay from 'cowsay-browser';

export default () => (
  <div>
    <p>This page costs 29.8 KB after gzip!</p>
    <pre>{cowsay.say({ text: 'I am a big package!' })}</pre>
    <Link href="/">
      <a>Go home</a>
    </Link>
  </div>
);

Hello, this is the homepage

I'm only 0.59 KB after gzip.

This page costs 29.8 KB after gzip!

 _____________________
< I am a big package! >
 ---------------------
       \   ^__^
        \  (oo)_______
           (__)       )\/\
               ||----w |
               ||     ||

import Link from 'next/link';

export default () => (
  <div>
    <h1>Hello, this is the homepage</h1>
    <p>I'm only 0.59 KB after gzip.</p>
    <Link href="/cowsay">
      <a>Cowsay</a>
    </Link>
  </div>
);

import Link from 'next/link';

// only being loaded on \`/cowsay\`
import cowsay from 'cowsay-browser';

export default () => (
  <div>
    <p>This page costs 29.8 KB after gzip!</p>
    <pre>{cowsay.say({ text: 'I am a big package!' })}</pre>
    <Link href="/">
      <a>Go home</a>
    </Link>
  </div>
);

Hello, this is the homepage

I'm only 0.59 KB after gzip.

This page costs 29.8 KB after gzip!

 _____________________
< I am a big package! >
 ---------------------
       \   ^__^
        \  (oo)_______
           (__)       )\/\
               ||----w |
               ||     ||

Custom Server with ExpressSetting up a custom Express server to handle requests.See this example

PrefetchingHow to use the built-in page prefetching functionality.See this example

Styled ComponentsHow to use Styled Components for styling.See this example

Data FetchingUsing getInitialProps to fetch data on the server or on the client.See this example

Parameterized RoutingHow to set up custom routes, such as /blog/:id for posts.See this example

TypeScriptHow to set up the TypeScript type system for your components.See this example

ElectronHow you can use Next.js inside an Electron application.See this example

ReduxHow to use the well-known Redux for global state management.See this example

SSR CachingHow to cache the resulting HTML of a page to avoid re-rendering.See this example

Less, PostCSS, CSS ModulesHow to use Next.js with next-less plugin.See this example

Apollo GraphQLHow to use the Apollo framework for GraphQL data fetching.See this example

github.com/zeit/next.js150+ examples

Custom Server with ExpressSetting up a custom Express server to handle requests.See this example

PrefetchingHow to use the built-in page prefetching functionality.See this example

Styled ComponentsHow to use Styled Components for styling.See this example

Data FetchingUsing getInitialProps to fetch data on the server or on the client.See this example

Parameterized RoutingHow to set up custom routes, such as /blog/:id for posts.See this example

TypeScriptHow to set up the TypeScript type system for your components.See this example

ElectronHow you can use Next.js inside an Electron application.See this example

ReduxHow to use the well-known Redux for global state management.See this example

SSR CachingHow to cache the resulting HTML of a page to avoid re-rendering.See this example

Less, PostCSS, CSS ModulesHow to use Next.js with next-less plugin.See this example

Apollo GraphQLHow to use the Apollo framework for GraphQL data fetching.See this example

github.com/zeit/next.js150+ examples

Why Next.js

The world’s leading companies use and love Next.js

Server Rendering

With Next.js, server rendering React applications has never been easier, no matter where your data is coming from.

Static Exporting

No need to learn a new framework. Exporting a static site with Next.js is as easy as a single command.

CSS-in-JS

Next.js comes with styled-jsx included, but it also works with every CSS-in-JS solution you know and love.

Zero Setup

Automatic code splitting, filesystem based routing, hot code reloading and universal rendering.

Learn Next.js

Fully Extensible

Complete control over Babel and Webpack. Customizable server, routing and next-plugins.

View Full Documentation

Ready for Production

Optimized for a smaller build size, faster dev compilation and dozens of other improvements.

View Showcase

Read Case Study

Who’s Using Next.js

We’re honored some of the most talented creatives out there build with Next.js

Tencent News

Netflix Jobs

Twitch

Hulu

realtor.com

Nike

AT&T

View Gallery

Learn Next.js

Tutorials, examples and quizzes. Learn Next.js step-by-step and earn points ✨.

Get Started