Setting Up Next.js Environment

⏱ Estimated reading time: 2 min

Setting up a Next.js development environment is simple and quick. Follow the steps below to get started.

Prerequisites

Before installing Next.js, make sure the following tools are installed on your system:

• Node.js (version 18 or later recommended)

• npm, yarn, pnpm, or bun (any one package manager)

• A code editor (VS Code recommended)

To check Node.js installation:

node -v
npm -v

Step 1: Create a New Next.js Project

Use the official Next.js CLI to create a new project.

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

Or using other package managers:

yarn create next-app my-next-app

pnpm create next-app my-next-app

bun create next-app my-next-app

During setup, you will be asked to choose options such as:

• TypeScript support

• ESLint

• Tailwind CSS

• App Router (recommended)

• Import alias

Step 2: Navigate to Project Folder

cd my-next-app

Step 3: Start the Development Server

npm run dev

or

yarn dev

The application will run at:

http://localhost:3000

Step 4: Project Structure Overview (App Router)

my-next-app/
│── app/
│   ├── page.js        // Home page
│   ├── layout.js      // Root layout
│── public/            // Static assets
│── styles/            // Global styles
│── next.config.js     // Next.js configuration
│── package.json       // Dependencies & scripts

Step 5: Verify Installation

Open your browser and visit http://localhost:3000<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" data-rtl-flip="" class="block h-[0.75em] w-[0.75em] stroke-current stroke-[0.75]"></svg>.
If you see the default Next.js welcome page, the setup is complete.

Optional: Build for Production

To create an optimized production build:

npm run build
npm start

Conclusion

Your Next.js environment is now ready. You can start building pages, components, and APIs using the powerful features provided by Next.js.