[Next.js 15] - Part 1. Create Your First Next.js Project

Welcome to the exciting world of Next.js! In this guide, we’ll walk through creating a Next.js project step-by-step. So, fire up your terminal and let’s get started! 🚀

1. Check System Requirements

Before we dive in, let’s ensure you meet the basic requirements. You’ll need Node.js version 18 or higher installed on your machine. To check your current version, run the following command in your terminal:

If the version is 18 or above, you’re good to go! Otherwise, download the latest version of Node.js from the official website.

2. Use create-next-app to Set Up the Project

Next.js provides a handy CLI tool called create-next-app, which automates project setup for you. This tool handles all the initial configuration so you can hit the ground running.

Run the following command in your terminal:

What’s npx?npx is a tool that comes bundled with Node.js. It allows you to execute npm packages without installing them globally on your system. Super convenient!

3. Answer CLI Prompts

Once you run the command, the CLI will ask a series of questions to configure your project.

Here’s how to respond:

1. What is your project named? → Enter a name for your project, e.g., next-15-blog.

2. Would you like to use TypeScript? → Select Yes to help catch errors early and makes your code easier to maintain as your project grows. .

3. Would you like to use ESLint? → Select Yes. ESLint helps you catch code errors early.

4. Would you like to use Tailwind CSS? → Select Yes. Tailwind CSS will be preconfigured for you.

5. Would you like to use the src/ directory? → Select Yes. It keeps your project organized.

6. Would you like to use the App Router? → Select Yes. App Router is a core feature of Next.js.

7. Would you like to customize the default import alias? → Select No to keep it simple.

Once you’ve answered these questions, the CLI will download and configure all the necessary dependencies. Sit back and relax while it sets up your project.

4. Start the Development Server

When the installation finishes, you’ll see a success message. Now, let’s navigate to your project folder:

Start the development server with this command:

This command launches the Next.js development server and provides a local URL, typically http://localhost:3000.

5. View Your Project

Open your browser and visit http://localhost:3000. You should see the Next.js welcome page, confirming that everything is set up correctly!

To stop the development server, press Ctrl + C in your terminal.

Summary

Congratulations! 🎉 You’ve successfully created and run your first Next.js project. In the next section, we’ll explore the project structure and learn about key commands like npm run dev.

Remember to keep the official Next.js documentation open for reference. It’s always up to date and will be your best resource as you learn and build.

Great job, and see you in the next chapter! 🚀