Environment Setup and Next.js Directory Structure
Let us set up a clean Next.js project using the official CLI scaffold tool and analyze how the Workspace files are organized.
1. Initializing the Project
To create a new Next.js project using the recommended configurations (TypeScript, ESLint, Tailwind CSS, App Router), execute the following command in your terminal:
# Initialize a new Next.js app in non-interactive mode
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"Once installation finishes, enter the directory and start the local development server:
# Enter directory
cd my-app
# Launch the Dev Server (typically runs on http://localhost:3000)
npm run dev2. Directory Layout Breakdown
If you choose the src directory option, your project structure looks like this:
my-app/
├── public/ # Static assets (images, icons, robots.txt)
├── src/
│ └── app/ # App Router root folder
│ ├── layout.tsx # Global application layout wrapper
│ ├── page.tsx # Homepage route component
│ └── globals.css # Global Tailwind styles
├── next.config.mjs # Next.js custom configurations
├── package.json # Scripts and dependencies
└── tsconfig.json # TypeScript configurations3. The Core App Router Files
Inside src/app/, two files form the core entry point of your application:
Global Layout (src/app/layout.tsx)
This file defines the base HTML structure. Every page in your application renders inside this layout:
// src/app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "My Next.js Application",
description: "Built using the modern App Router"
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}Homepage Page (src/app/page.tsx)
This file represents the main landing page of your application at the root route:
// src/app/page.tsx
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
<p className="mt-4 text-lg text-gray-500">Edit src/app/page.tsx to get started.</p>
</main>
);
}Published on Last updated: