next.js

The React Framework https://nextjs.org

 

Visit nextjs.org/learn 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 nextjs.org/docs


How to use

Setup

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 (
    <pre>
      {cowsay.say({ text: 'hi there!' })}
    </pre>
  )
}

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.

shares