The React Framework


Visit to get started with Next.js.

The below readme is the documentation for the canary (prerelease) branch. To view the documentation for the latest stable Next.js version visit

How to use


Install it:

npm install --save next react react-dom

and add a script to your package.json like this:

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"

After that, the file-system is the main API. Every .js file becomes a route that gets automatically processed and rendered.

Populate ./pages/index.js inside your project:

function Home() {
  return <div>Welcome to Next.js!</div>

export default Home

and then just run npm run dev and go to http://localhost:3000. To use another port, you can run npm run dev -- -p &lt;your port here&gt;.

So far, we get:

  • Automatic transpilation and bundling (with webpack and babel)
  • Hot code reloading
  • Server rendering and indexing of ./pages
  • Static file serving. ./static/ is mapped to /static/ (given you create a ./static/ directory inside your project)

To see how simple this is, check out the sample app – nextgram

Automatic code splitting

Every import you declare gets bundled and served with each page. That means pages never load unnecessary code!

import cowsay from 'cowsay-browser'

function CowsayHi() {
  return (
      {cowsay.say({ text: 'hi there!' })}

export default CowsayHi

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.