Next.js comes with many features on top of features React offers which are already included in the framework:
- Server-rendered by default – You don’t have to render server again and again. Next.js takes care of it for you by default.
- Code splitting is automatic to load page faster.
- Client-side routing is simple and page based. Simply create a page(about.js) and your client-side route will be (/client).
- Webpack-based dev environment which supports Hot Module Replacement(HMR). HMR detects changes in your code and refreshes the section which has changes without actually refreshing the whole page. Cool, right?
- Able to implement with Express or any other Node.js HTTP server.
- Customizable with your own Babel and Webpack configurations.
Next.js works the same in all OS (Windows, Linux, & Mac). So let’s get on to the steps to create our page:
- Install node.js. This is the first step. Need to have node.js installed globally on your system.
- Open command line / terminal and navigate to your web root. Now we will run few commands to create our project folder, install packages such as react, next and create pages directory where project pages will reside. These are the commands you need to run, one after another:
npm init -y
npm install --save react react-dom next
- At this point you will have a project folder with next framework installed. Now go to your project folder, locate package.json, open the “package.json” in the hello-world directory and add the following NPM script:
"build": "next build",
"start": "next start"
- Now let’s create a file
index.jsin the pages folder we created couple of steps ago and add following code in it and save it:
const Index = () => (
export default Index;
- Now final step run following command terminal:
npm run devand go to http://localhost:3000
You’ll see a page with “Hello World!”. Here we go, created a page in 5 easy steps. Pretty easy, right?
You can get into advanced stuff and build a full-fledged website using next.js in no time. Here is the documentation for next.js: https://nextjs.org/docs
Author’s GitHub Profile: https://github.com/abhij89
Read Important Linux Commands: https://blog.staginginstance.com/important-linux-ubuntu-commands/