Creating a Next.js Project

Creating Your Next.js Project

With our development environment set up, it's time to scaffold our Next.js application.

1. Choose Your Project Directory

Open your terminal and navigate to where you want to store your project:

# Windows
cd C:\Projects

# Mac/Linux
cd ~/Projects

# Or create a folder in VS Code and open the integrated terminal (Ctrl+`)

2. The Bootstrap Command

Run the official Next.js initializer:

npx create-next-app@latest headless-wp

npx: Executes the package without a global install.
create-next-app@latest: The latest stable Next.js template.
headless-wp: The name of your project directory.

3. Configuration Prompts

You will be presented with several configuration choices. Here are the recommended settings:

Would you like to use TypeScript?

→ Yes (Highly Recommended)

Adds static typing to JavaScript, catching errors during development rather than at runtime.

Would you like to use ESLint?

→ Yes

Keeps your code clean and consistent by flagging potential issues.

Would you like to use Tailwind CSS?

→ Yes

An utility-first CSS framework that allows for rapid UI development without leaving your HTML.

Would you like to use src/ directory?

→ No

For this guide, we'll keep our files in the root for simplicity, but many production apps use /src.

Would you like to use App Router?

→ Yes (Required)

The modern routing system introduced in Next.js 13 which enables Server Components and better performance.

Would you like to customize the default import alias?

→ No

We will stick with the standard `@/*` alias for cleaner imports.

4. Verification

Once the installation finishes, you'll see a success message:

Success! Created headless-wp at /your/path/headless-wp

5. Enter the Project

cd headless-wp

6. Open in VS Code

code .

7. Start the Development Server

npm run dev

You should see the output:

▲ Next.js 14.x.x
- Local: http://localhost:3000
- Ready in 2s

8. View in Browser

Open http://localhost:3000. You should see the default Next.js starter page. Congratulations, your app is officially alive! 🚀