Installation and Development Environment Configuration

In Quantum Metropolis, before an engineer can begin working on the city's systems, they must prepare their biometric quantum workstation. Similarly, as a Next.js developer, you must first configure your development environment. In this module, you will learn how to install and configure all the necessary tools for building applications in Next.js 15.

System Requirements

Before we begin the installation, make sure your computer meets the minimum requirements. Just as the quantum terminals in Quantum Metropolis require specific energy specifications, the Next.js environment needs appropriate software versions:

• Node.js - version 18.17 or newer
• macOS, Windows (including WSL) or Linux
• Minimum 1GB RAM (recommended 4GB or more for larger projects)
• Code editor - recommended Visual Studio Code with React/Next.js extensions

Installing Node.js and npm

Node.js is like the quantum energy generator for your development environment - it powers all processes and tools.

Windows and macOS

1. Visit the official Node.js website
2. Download and install the latest LTS (Long Term Support) version
3. Verify the installation by opening a terminal and typing:

1node -v
2npm -v

You should see the version numbers for Node.js and npm (Node Package Manager).

Linux (Ubuntu/Debian)

1sudo apt update
2sudo apt install nodejs npm
3# Alternatively, to get the latest version:
4curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
5sudo apt install nodejs

Managing Node.js Versions

For more advanced users, just as Quantum Metropolis engineers use virtualization systems to test different energy configurations, you can use tools to manage Node.js versions:

• nvm (Node Version Manager) for macOS/Linux
• nvm-windows for Windows

1# Installing nvm (macOS/Linux)
2curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
3
4# Installing a specific Node.js version
5nvm install 18.17.0
6nvm use 18.17.0

Installing a Code Editor

In Quantum Metropolis, holographic code editors are integrated with the engineers' neural implants. Fortunately, in our world, installing a good code editor on your computer is sufficient. Visual Studio Code is currently one of the most popular editors for Next.js developers.

1. Download and install Visual Studio Code
2. Install useful extensions:
   • ES7+ React/Redux/React-Native snippets - code templates
   • ESLint - static code analysis
   • Prettier - code formatting
   • Tailwind CSS IntelliSense (if you plan to use Tailwind CSS)
   • GitHub Copilot (optional) - AI assistant for developers

Creating a New Next.js Project

Now that you have the necessary tools installed, you can create your first Next.js 15 project. Vercel provides a convenient

create-next-app

tool that automatically configures the project with best practices.

1npx create-next-app@latest my-quantum-app

During installation, you will be asked to answer several configuration questions:

1Would you like to use TypeScript? Yes
2Would you like to use ESLint? Yes
3Would you like to use Tailwind CSS? Yes
4Would you like to use src/ directory? Yes
5Would you like to use App Router? (recommended) Yes
6Would you like to customize the default import alias (@/*)? No

We recommend answering "Yes" to most questions, especially those regarding TypeScript and App Router, which are key for modern Next.js 15 applications.

After installation is complete, navigate to the project directory and start the development server:

1cd my-quantum-app
2npm run dev

Your application should now be available at http://localhost:3000.

Alternative Installation Methods

Yarn

If you prefer to use Yarn instead of npm:

1npm install -g yarn
2yarn create next-app my-quantum-app

pnpm

PNPM is an alternative package manager that can save disk space:

1npm install -g pnpm
2pnpm create next-app my-quantum-app

TypeScript Configuration

TypeScript is like the security system in Quantum Metropolis - it prevents errors before they occur. Next.js has built-in TypeScript support, and the latest versions of

create-next-app

will configure it automatically. If you create a project manually, you can add TypeScript later:

1touch tsconfig.json
2npm run dev

Next.js will detect the

tsconfig.json

file and suggest installing the necessary dependencies.

Next.js 15 Project Structure with App Router

After creating a new project, you will see the following directory structure:

1my-quantum-app/
2├── node_modules/      # Installed dependencies
3├── public/            # Static files (images, fonts)
4├── src/               # Application source code
5│   ├── app/           # App Router directory
6│   │   ├── layout.tsx # Main layout
7│   │   ├── page.tsx   # Home page
8│   │   └── globals.css # Global styles
9├── .eslintrc.json     # ESLint configuration
10├── next.config.js     # Next.js configuration
11├── package.json       # Dependencies and scripts
12├── postcss.config.js  # PostCSS configuration
13├── tailwind.config.js # Tailwind CSS configuration
14└── tsconfig.json      # TypeScript configuration

ESLint Configuration

ESLint is like the air quality monitoring system in Quantum Metropolis - it maintains code cleanliness and quality. Next.js includes a basic ESLint configuration, but you can extend it:

1npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Then update the

.eslintrc.json

file:

1{
2  "extends": [
3    "next/core-web-vitals",
4    "prettier"
5  ],
6  "plugins": ["prettier"],
7  "rules": {
8    "prettier/prettier": "error",
9    "no-unused-vars": "warn"
10  }
11}

Prettier Configuration

Prettier is like the automatic space organization system in Quantum Metropolis - it maintains consistent code appearance. Create a

.prettierrc

file in the project directory:

1{
2  "semi": true,
3  "trailingComma": "all",
4  "singleQuote": true,
5  "printWidth": 80,
6  "tabWidth": 2
7}

VSCode Configuration for the Project

To fully integrate VS Code with your project, create a

.vscode

directory in the root of the project, and then a

settings.json

file inside:

1{
2  "editor.formatOnSave": true,
3  "editor.defaultFormatter": "esbenp.prettier-vscode",
4  "editor.codeActionsOnSave": {
5    "source.fixAll.eslint": true
6  },
7  "typescript.tsdk": "node_modules/typescript/lib",
8  "typescript.enablePromptUseWorkspaceTsdk": true
9}

Environment Variables Configuration

In Quantum Metropolis, every system has its special access parameters. In Next.js, we use environment variables to store sensitive information and environment-specific configurations. Create a

.env.local

file in the project root directory:

1# Example environment variables
2DATABASE_URL=your_database_url
3API_KEY=your_api_key
4NEXT_PUBLIC_API_URL=https://api.example.com

Variables with the

NEXT_PUBLIC_

prefix will also be available in the browser.

Testing the Installation

To make sure everything works correctly, modify some code in the

src/app/page.tsx

file and see if the changes are visible in the browser. If so, your environment is correctly configured!

Common Issues and Solutions

Port Conflicts

If port 3000 is already in use, you can run Next.js on a different port:

1npm run dev -- -p 3001

Node.js Issues

If you encounter version compatibility errors, make sure you are using the required version:

1node -v
2# If the version is too old, update Node.js or use nvm

TypeScript Issues

If you encounter TypeScript errors, check if you have the appropriate types installed:

1npm install --save-dev @types/react @types/node

Advanced Configuration

For more advanced projects, just as advanced systems in Quantum Metropolis require additional configuration, you can customize your Next.js environment:

Adding Path Aliases

Modify

tsconfig.json

to add path aliases:

1{
2  "compilerOptions": {
3    "baseUrl": ".",
4    "paths": {
5      "@/components/*": ["src/components/*"],
6      "@/lib/*": ["src/lib/*"],
7      "@/styles/*": ["src/styles/*"],
8      "@/utils/*": ["src/utils/*"]
9    }
10  }
11}

Test Configuration

Add Jest or React Testing Library to the project:

1npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Create a

jest.config.js

file:

1const nextJest = require('next/jest');
2
3const createJestConfig = nextJest({
4  dir: './',
5});
6
7const customJestConfig = {
8  setupFilesAfterSetup: ['<rootDir>/jest.setup.js'],
9  testEnvironment: 'jest-environment-jsdom',
10};
11
12module.exports = createJestConfig(customJestConfig);

Then create a

jest.setup.js

file:

1import '@testing-library/jest-dom';

Summary

Congratulations! Just like an engineer in Quantum Metropolis who completed their workstation configuration, you now have a fully configured development environment for Next.js 15. Your holographic terminals (code editor) are ready, the quantum reactor (Node.js) is running, and the security systems (TypeScript, ESLint) are active.

In the next module, we will learn more about project initialization and available starters that will help you start working on specific types of applications more quickly.