Sharing is caring!

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 <span class="token operator">--</span>save next react react<span class="token operator">-</span>dom

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

<span class="token punctuation">{</span>
  <span class="token string">"scripts"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token string">"dev"</span><span class="token punctuation">:</span> <span class="token string">"next"</span><span class="token punctuation">,</span>
    <span class="token string">"build"</span><span class="token punctuation">:</span> <span class="token string">"next build"</span><span class="token punctuation">,</span>
    <span class="token string">"start"</span><span class="token punctuation">:</span> <span class="token string">"next start"</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

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:

<span class="token keyword">function</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span>
Welcome to Next.js!

<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> 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!

<span class="token keyword">import</span> cowsay <span class="token keyword">from</span> <span class="token string">'cowsay-browser'</span>

<span class="token keyword">function</span> <span class="token function">CowsayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
      {cowsay.say({ text: 'hi there!' })}


<span class="token keyword">export</span> <span class="token keyword">default</span> 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.