7 Installation and Configuration of Next.js (With yarn / npm)

The installation of Next.js involves not only setting up the framework but also configuring the project structure, including creating essential directories like pages. This article details the installation and basic setup of Next.js using npm or yarn.

7.1 Prerequisites

Ensure Node.js is installed on your system, as Next.js requires Node.js version 10.13 or newer.

7.2 Installation with npm

7.2.1 Step 1: Create Project Directory

Create a new directory for your project and navigate into it:

mkdir my-nextjs-project
cd my-nextjs-project

7.2.2 Step 2: Install Next.js

Run the following command to install Next.js, React, and React DOM:

npm init -y
npm install next react react-dom

7.2.3 Step 3: Create Project Structure

Create a pages directory within your project directory:

mkdir pages

This directory is essential as Next.js looks here for page components.

7.2.4 Step 4: Add Scripts

In the package.json file, add the required scripts:

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

7.2.5 Step 5: Start Development Mode

Start the development server:

npm run dev

Now your Next.js project is running locally at http://localhost:3000.

7.3 Installation with yarn

7.3.1 Step 1: Create Project Directory

mkdir my-nextjs-project
cd my-nextjs-project

7.3.2 Step 2: Install Next.js

yarn init -y
yarn add next react react-dom

7.3.3 Step 3: Create Project Structure

mkdir pages

7.3.4 Step 4: Add Scripts

Add the required scripts to package.json.

7.3.5 Step 5: Start Development Mode

yarn dev

7.4 npm or yarn

After installation and setting up the required directories, your Next.js project is ready to go. The choice between npm and yarn depends on your personal preferences or your team’s requirements. Next.js requires a specific directory structure, especially the pages directory, for the framework to function efficiently.

7.5 Content

To avoid starting with a 404 error, an index.jsx file can be added to the pages directory:

function HomePage() {
  return <div>Hello World!</div>;
}

export default HomePage;

7.6 Typescript

To use a TypeScript file in your Next.js project, specifically an index.tsx file for your homepage, you need to follow a few additional steps to set up TypeScript in your project. Next.js has built-in support for TypeScript, making the process relatively straightforward.

7.6.1 Steps to Use TypeScript in Next.js

Install TypeScript and Type Definitions for React: Run the following command in your project directory to install TypeScript and the type definitions for React and Node:
```
npm install --save-dev typescript @types/react @types/node
```
or, if you’re using yarn:
```
yarn add --dev typescript @types/react @types/node
```
Create a TypeScript Configuration File: When you start your Next.js server next time, Next.js will detect that TypeScript is being used in the project and will automatically create a tsconfig.json file for you. You can also manually create a tsconfig.json file at the root of your project and start with standard configurations.
Rename Your File: Change the name of the file pages/index.js or pages/index.jsx to pages/index.tsx.

Update the Code for TypeScript: Adjust the code in your index.tsx file to use typings. For example:

const HomePage: React.FC = () => {
  return <div>Hello World!</div>;
};

export default HomePage;

Restart Your Next.js Server: After setting up TypeScript and renaming your file, restart your server. Use npm run dev or yarn dev. Next.js will now automatically compile your TypeScript files.
Check Your Application: Open http://localhost:3000 in your browser to ensure that your TypeScript page is being rendered correctly.

By following these steps, you convert your Next.js application to use TypeScript, which offers stricter type checking and an improved development experience.