Getting Started with Create Next.js Project and Basic Frontend Setup
In this post, I want to share a simple way to initialize a Next.js project. I’ll walk through how I usually create a new project and set up a basic frontend structure that works well as a starting point for further development.


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-appAfter 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-app2. Start the Development Server
To run the project locally, use:
npm run devThen 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.csspage.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.
Comments (5 comments)
Hi Test Comment
Hello world test!
Hi test reply!
hello surakiat.
Hi test reply