Creating a Next.js App and Project Structure

The fastest way to start a Next.js project is the official scaffolding tool, create-next-app. In this lesson you will generate a fresh project, run the development server, and tour every file and folder so nothing in the project feels mysterious. Understanding the structure now will pay off in every later lesson.

Scaffolding a New Project

Make sure you have Node.js 18.18 or newer, then run:

bash

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

The installer asks a series of questions. Recommended answers for this course:

TypeScript? Yes (you can answer No and follow along in JavaScript).
ESLint? Yes - catches common mistakes early.
Tailwind CSS? Yes - we cover styling options in Lesson 10.
src/ directory? No - keeps paths shorter for learning.
App Router? Yes - this is essential for this course.
Turbopack? Yes - the faster dev bundler in recent versions.
Import alias? Accept the default @/*.

When it finishes, start the dev server:

bash

cd my-next-app
npm run dev

Open http://localhost:3000 and you will see the starter page. The dev server supports Fast Refresh: edit a file, save, and the browser updates instantly without losing state.

Touring the Project Structure

A fresh project looks like this:

text

my-next-app/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js
│   └── page.js
├── public/
├── next.config.mjs
├── package.json
├── jsconfig.json (or tsconfig.json)
└── eslint.config.mjs

The app Directory

This is the heart of the App Router. Every folder inside app can become a URL segment, and special file names have special jobs. page.js defines the UI for a route, and layout.js defines UI that wraps pages. The root layout.js is required: it renders the html and body tags for the entire application.

jsx

// app/layout.js
import './globals.css';

export const metadata = {
  title: 'My Next App',
  description: 'Learning Next.js on CodeYourCraft',
};

export default function RootLayout({ children }) {
  return (
    <html lang='en'>
      <body>{children}</body>
    </html>
  );
}

The children prop is where each page gets rendered. globals.css holds styles that apply everywhere and is imported once, here in the root layout.

The public Directory

Static assets like images, fonts, and robots.txt live in public. A file at public/logo.png is served at /logo.png. Nothing in public is processed by the bundler, so use it for files that should be served exactly as-is.

Configuration Files

next.config.mjs customizes framework behavior: redirects, image domains, environment settings.
package.json defines scripts: dev for development, build for production builds, start to serve a build.
jsconfig.json or tsconfig.json sets up the @/ import alias so you can write import Button from '@/components/Button'.

The Three Core Scripts

bash

npm run dev    # development server with Fast Refresh
npm run build  # optimized production build
npm run start  # serve the production build locally

Run npm run build now, just to see the output. Next.js prints a route table showing which routes are static and how large each bundle is. Reading this table is a habit worth forming early.

Making Your First Edit

Open app/page.js, delete the starter content, and replace it with a simple component of your own. Save, and watch the browser update. Congratulations - you are officially developing with Next.js.

Key Takeaways

create-next-app scaffolds a complete, configured project in one command.
The app directory drives routing; layout.js wraps pages and is required at the root.
public serves static files verbatim from the site root.
npm run dev, build, and start cover the whole development lifecycle.

Next up: Lesson 3 explores file-based routing in depth - how folders, pages, and nested routes map to URLs.