Getting Started with Create Next.js Project and Basic Frontend Setup

1. Create a New Next.js Project

The easiest way to start is by using create-next-app, which is the official tool provided by the Next.js team.

Open your terminal and run the following command:

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

After running the command, you will be asked a few questions. For most projects, I usually go with these options:

• Use TypeScript: Yes
• Use ESLint: Yes
• Use Tailwind CSS: Optional (depends on your preference)
• Use App Router: Yes
• Use src directory: Optional
• Use Turbopack: Optional

Once the installation is complete, move into the project folder:

cd my-next-app

2. Start the Development Server

To run the project locally, use:

npm run dev

Then open your browser and go to: http://localhost:3000

If everything is set up correctly, you should see the default Next.js homepage.

3. Understanding the App Router Structure

When using the App Router, most of your work will be inside the app directory.

A simple structure looks like this:
app
├─ layout.tsx
├─ page.tsx
└─ globals.css

page.tsx is the main page for a route

layout.tsx is used to wrap pages and share layout across routes

globals.css is for global styles

This structure makes routing more intuitive compared to the old Pages Router.

4. Editing Your First Page

Open app/page.tsx and try editing the content:

export default function Home() {
  return (
    <main>
      <h1>Hello Next.js App Router</h1>
      <p>This is my first Next.js page.</p>
    </main>
  );
}

Once you save the file, the browser will automatically refresh and show your changes.

5. Basic Frontend Setup

At this stage, I usually start preparing a basic frontend setup, such as:

• Setting up global styles
• Creating a components folder
• Defining a simple layout structure

For example, you might create a components folder inside app or src to keep reusable UI components organized.