Next.js - Environment Setup

---

---

Next.js is a popular React-based framework that uses Node.js as the runtime for server-side rendering and development. To set up a Next.js environment, we first need to configure the Node.js environment. In this chapter, we will learn how to set up Node.js, install Next.js, and run a Next.js server.

Prerequisites

Before starting, make sure you have installed following tools in your system:

• Install Node.js (Version 14.6.0 or newer)
• Download and install VSCode from official site.
• Basic knowledge of React environment.

Steps to Setup Next.js Environment

Following section describes step-by-step procedure for setting up Next.js environment.

Step 1: Create a New Next.js Application

Next.js have a built in tool "create-next-app" to make a project with fully functional configuration. To create a application, open your terminal/powershell in the folder where you want to build app. Then run the following command (same for mac/linux/windows).

npx create-next-app@latest

After running this you will be prompted to give name for your project. Enter a suitable name, and then you will be asked to select tools to be installed along with Next.js. Using left arrow, right arrow and enter key, select Typescript, Tailwind CSS and ESlint. Use the image below as reference.

Step 2: Understand The Project Structure

After successfully create new Next.js app, you can see a new folder with lots of file in the directory you selected. Now in the terminal, navigate to this directory using following command. (Replace name of your app in command)

cd next-js-example

This will open project directory in terminal. The "next-js-example" folder will look something like this.

next-js-example/
     /public/
     /app/
     /styles/
     .gitignore
     package.json
     README.md
     next.config.js

Here is overview some of important files and folders.

• /public/: Folder that contains static files like images and fonts
• /app/: Folder that stores all the React components.
• /styles/: Folder that contains CSS files for styling.
• package.json: A file that lists project dependencies and scripts.

You can ignore rest of folders and files, as they are not frequently used in next.js development.

Step 3: Run the Development Server

Now, we can run the Next.js development server using following command. (Make sure you are in project directory, ie next-js-example)

npm run dev

On successfully running this command, a new Next.js server will be set up at http://localhost:3000/. Your default browser will open this page automatically for you. Here is how it look like.

Step 4: Setup Development Environment

Now everything is set. You can start editing "/app/page.tsx" to see changes in output. Here I can suggest some VS code extension that can help with Next.js development.

• ES7 React Snippet: This extension provides handy code snippets for React, Redux, and other libraries, reducing boilerplate code. For example, you can quickly generate functional components or `useEffect` hooks with simple shortcuts.
• JavaScript and TypeScript Nightly : This extension updates your VS Code with nightly builds of JavaScript and TypeScript language features.
• Tailwind CSS Intellisense: If you are using tailwind CSS in your project, this extension will be useful. It can provide intelligent suggestion for tailwind css code.