Getting Started with Next.js

Next.js is one of the fastest growing frameworks for web development out there. It is extremely popular in the community and developers generally like working with Next.js. In this post, we will look at step-by-step approach of getting started with Next.js.

Next.js uses React under the hood. So if you are new to React, I will recommend you to go through the React introduction.

1 – What is Next.js?

Next.js is basically a React framework for production.

Basically, this is the official stand from the creators of Next.js. You might feel that this is some sort of marketing gimmick because React is already a pretty well-developed library and you can use it to build web applications of all types.

Technically, this thought process is correct. However, Next.js offers several advantages over using simple React.

• Firstly, Next.js offers several features that make it easy to build production-level applications.
• React focuses mainly on user interface. For building a complete app, you need to use additional libraries. However, Next.js is more of a full stack framework for React.
• Next.js attempts to enhance React. Since it is a framework, it is bigger and has more moving parts.
• Next.js solves common problems with web development and makes it easier to build React applications. There are a lot of utilities that are provided out-of-the-box with Next.js. In other words, we don’t need to reinvent the wheel.
• React encourages using a bunch of external packages to enhance your application. Next.js provides a lot of features as part of the core package and you don’t have to use as many external packages.
• Next.js provides more guidance in terms of best practices and conventions while designing your application.

2 – Key Features of Next.js

While Next.js provides several features on top of React, some of the key features that are a must-know for getting started with Next.js are as follows:

• Built-In Server Side Rendering Support – React is a client-side library and rendering of the DOM happens on the client i.e. the browser. Due to this, data fetching only happens when the JavaScript executes on the browser. While this is perfect for many application, it is often a detrimental approach for SEO requirements. Search engine crawlers may face issues when rendering happens on the client. For SEO, it is better to have the page rendered on the server. Next.js provides the best of both worlds by blending client-side and server-side code. In Next.js the initial load is pre-rendered on the server and only the finished page is served. There are no loading screens for the user and it is also great for SEO needs.
• File Based Routing – Routing is the process of enabling multiple pages for the user. Basically, with routing, we change what’s visible on the screen without making a request to the server. In React, we use packages such as react-router to enable routing. However, we have to write code to set up routing. Next.js makes it extremely easy to handle routing with file-based routing. This is done by having a special folder named pages. There is no need to write extra code for enabling routing. This is quite similar to the original days of web development.
• Building Full Stack React Apps – Next.js makes it easy to add backend code (server-side) as well to our application. In other words, we can implement features like storing data, getting data, authentication and so on. There is no need to build a standalone backend project just for having some REST endpoints.

3 – Creating a Default Next.js Project

Next.js requires NodeJS. In other words, for getting started with Next.js, the first step would be install NodeJS on your system.

Once NodeJS installation is done, we can easily create a Next.js project with the below command:

$ npx create-next-app

The project creation workflow will ask for a project name. Once we enter a suitable name, the project will be created in the directory where the command is executed.

In case we intend to work with Typescript, we can create a Next.js application with Typescript support.

$ npx create-next-app --typescript

Also, we can use yarn instead of npm if we prefer it more.

4 – Walkthrough of Next.js Starter Project

Once the project is ready, we can have a look at what was actually created in the default project.

• First we have the pages folder. As discussed earlier, this is an important part of Next.js to create multiple routes. The starter project will have a default index.js file with some markup.
• The public folder is meant for public resources such as images. Note that there is no index.html file within the public folder. Basically, the index.html file is dynamically pre-rendered by Next.js.
• Also, there is the styles folder for keeping the CSS files for our application.

Within the package.json file, we have the dependencies and other scripts for starting the application.

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

The dev script starts up our application by launching a development server. Other scripts such as build and start are for production related usage.

Also, within the pages folder, we have an important file _app.js.

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Basically, Next.js uses the App component to initialize pages. Here, the Component prop is the active page. When we navigate between routes, Component will change to the new page. Therefore, any props we send to the Component will be received by the page.

pageProps is an object with the initial props that were preloaded otherwise it’s an empty object.

We can start our application using npm run dev command. This will bring up the application on http://localhost:3000 with the default markup provided with the starter package.

Conclusion

Next.js is an amazing framework for building production ready full stack applications using React. In this post, we completed the step-by-step approach of getting started with Next.js. Also, we had a walkthrough of the default starter project.

In the next post, we will look Next.js File-Based Routing with examples.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.