Why NextJs and How to start ?
When you start build a modern web app powered by ReactJs is awesome, but at certain point you realize that there are so many problems related to render all Javascript file on client-side.
Load all JavaScript files before the UI be visible and interactive to user, it takes time to load all JavaScript and one of the most thing that every web developer worry about is how users feel using his website 🥵.
That’s show how CSR (Client Side Rendering) works:
Nextjs is a framework of react to render application on the server, that scales with your projects and it got some awesome features that help you project grow fast:
Nextjs is page-based routing system
All javascript files inside of pages directory can be accessed by its name, you don’t need any configuration, but you can customize that stuffs if you want. You remember using create-react-app you got to install a react-router-dom and call the {BrowserRouter and Route} to switch between pages without reload the App, with Nextjs you only go to create the file inside of pages directory and use the next/Link module to link the page and that’s it.
pages/index.jsimport Link from 'next/link'export default () => (
<div>
<h1>Hello !, I'm on the Home Page</h1>
<Link href="/about">I want to go on About page</Link>
</div>
)
Automatic code splitting
NextJs only load the libraries and JavaScript that the page needs, it does not generate one single file with all JavaScript app code like usual. Nextjs broken up automatically in several different resources.
Loading a page only takes the necessary JavaScript code for a particular page.
Example:
If you use a firebase module just in one single page, that module only will be loaded when user request that page, but if you use that module in so many pages (like 50% of App) Nextjs will put that module on the main JavaScript bundle.
That’s show how SSR (Server Side Rendering) works:
The App with Nextjs is more fast, because only load the necessary JavaScript code for each requested page.
API Endpoints
Without Nextjs to create a API or Serverless functions you got to create other folder or project, install your favorite web server like Express, create your API endpoints and put that run on another port, and when you make changes on your App you got to restart that server.
With NextJs you do all that stuffs just creating a API directory inside of Pages directory and start building you Serverless functions like you used to do with Express server and the API endpoints update when you make changes on your app.
pages/api/post.js
export default (req,res) => { res.status(200).json({msg: “Hello world” })}
You can request the api like:
fetch(‘http://localhost:3000/api/post').then((res) => res.json())
Hot reloading
The App only reload the pages that was made changes. If you are on About page and change something on Cart page, only cart page will be reloaded.
Easy to Start and Deploy
With NextJs is so easy to start build you first App with react, you just need install three modules:
yarn add react react-dom nextOr:npm install react react-dom next
create the npm package and on the scripts property add:
“scripts”: { “dev”: “next”, “build”: “next build”, “start”: “next start”}
Create the index.js inside of page directory:
pages/index.js
export default () => ( <h1>Hello world Nextjs App</h1>)
On the terminal run:
npm run devyou’ll get that message on your terminal:
ready — started server on http://localhost:3000Deploy
To deploy your app, just push to your GitHub repository, and import your repository to www.vercel.com platform and the platform does all stuffs for you and give you a link of your web app.
And that’s it 😍, you got your fist React App with Nextjs and deployed 🚀.
I hope you understand and deployed your App. Thanks and see you on next post 🤟.
