Next.js is a powerful React framework that makes it easy to build full-stack web applications with features like server-side rendering (SSR), static site generation (SSG), and built-in API routes. Created by Vercel, it's quickly become a favorite for developers who want both performance and flexibility.

In this guide, you’ll learn how to create a Next.js project from scratch in just 6 steps. We’ll also look at the history of Next.js and wrap up with a conclusion that points you toward what to do next.

🕰 A Brief History of Next.js

Next.js was developed by Vercel (formerly ZEIT) and officially launched in October 2016. It was created to solve the complexities of server-side rendering in React apps and to make it easier to build SEO-friendly, production-ready React applications.

Over the years, Next.js has evolved into a hybrid framework capable of supporting both static and dynamic content with great performance, powerful routing, and a robust developer experience.

✅ Step 1: Install Node.js and npm

Make sure you have Node.js and npm (or yarn) installed on your system.

To check:

node -v
npm -v

If not installed, download from: https://nodejs.org

✅ Step 2: Set Up a New Next.js Project

Use npx (comes with npm) to create a Next.js app using the official starter.

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

You’ll be asked to provide:

Project name (my-next-app)

Whether to use TypeScript

If you want ESLint, Tailwind CSS, or other tools

You can say yes or no depending on your preferences. For beginners, sticking to defaults is perfectly fine.

✅ Step 3: Navigate and Run the Project

Once the setup is complete:

cd my-next-app
npm run dev

The local development server will run at:

http://localhost:3000

You’ll see a welcome screen with links to documentation and examples.

✅ Step 4: Understand the Project Structure

Here’s a quick overview of what you’ll find inside the project:

pages/: Each .js or .tsx file becomes a route

index.js: Your homepage

api/: Serverless API routes (optional)

public/: Static assets like images, icons, etc.

styles/: CSS or SCSS files

next.config.js: Custom configurations

package.json: Lists dependencies and scripts

✅ Step 5: Create a New Page

Add a new route by creating a file in the pages/ folder.

touch pages/about.js

Paste in this code:

export default function About() {
return

About Page

;
}

Now navigate to:

http://localhost:3000/about

Boom! You’ve just created a new route in Next.js—without needing a router config file.

✅ Step 6: Deploy to Vercel (Optional but Recommended)

Vercel is the company behind Next.js and offers seamless deployment.

1. Go to https://vercel.com

2. Connect your GitHub/GitLab/Bitbucket repo

3. Import your project

4. Click Deploy

Vercel will automatically detect it’s a Next.js project and handle everything for you.

🎯 Conclusion: You’re Now a Next.js Developer!

You’ve successfully created a Next.js project from scratch in just six steps. Here’s what you’ve learned:

How to install and initialize a project

How routing works in Next.js

How to run a local dev server

How to create new pages

How to deploy your app for the world to see

From here, you can start exploring:

Dynamic routing

API routes

Static and server-side rendering

Data fetching (getStaticProps, getServerSideProps)

Styling with Tailwind, Sass, or CSS modules

Authentication and middleware

Next.js is a powerful tool in your web development arsenal. Whether you're building a simple portfolio or a complex web app, you're in good hands.

Stay tuned for more tutorials—and happy coding!

— Abdi Abyan