Implementing Next.js

Next.js is a minimalistic framework for server-rendered React applications. 

In this recipe, we are going to learn how to implement Next.js with Sass, and we will also get data from a service using axios.

Getting ready

First, let's create a new directory called nextjs, initialize package.json, and finally create a new directory inside it:

  mkdir nextjs
  cd nextjs
  npm init -y
  mkdir src

Then we need to install some dependencies:

  npm installnext react react-dom axios node-sass @zeit/next-sass

How to do it...

Now that we have installed the dependencies, let's create our first Next.js application:

1. The first thing we need to do is to create some scripts in our package.json. In each script, we need to specify the src directory. Otherwise, it will try to start Next from the root instead of the src path:

  "scripts": {
    "start": "next start src",
    "dev": "next src",
    "build": "next build src"
  }

File: package.json

2. The main directory in Next is called pages. This is where...