Next.Js--The-React-Framework

The React Framework

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

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>
JavaScript

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>
JavaScript
Welcome to Next.js!

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

<span class="token keyword">export</span> <span class="token keyword">default</span> Home
JavaScript

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

)
}

JavaScript
<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.

shares