Create a page with Next.js in 5 easy steps

Next.js is a Javascript based react framework. And we all know how important javascript is. The importance of JavaScript as a web technology can be determined from the fact that it is currently used by 94.5% of all websites. As a client-side programming language, JavaScript helps web developers to make web pages dynamic and interactive by implementing custom client-side scripts, it helps you build apps faster, and faster apps too. Hence with the rapidly changing technical world, you need to adapt Javascript which brings us to Next.js.

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:
  mkdir hello-world
cd hello-world
npm init -y
npm install --save react react-dom next
mkdir pages
• 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:
  "scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
• Now let’s create a file index.js in the pages folder we created couple of steps ago and add following code in it and save it:
  const Index = () => (
<div>
<p>Hello World!</p>
</div>
);

export default Index;
• Now final step run following command terminal: npm run dev and 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/