## Creating a New Next.js Project Alright, enough theory. Time to actually build something. 🚀 The easiest way to create a [Next.js](/courses/nextjs) application is with the official CLI tool called **`create-next-app`**. Open your terminal and run: ```bash npx create-next-app@latest my-app ``` Here: ```text create-next-app ``` creates the project, ```text @latest ``` makes sure you're using the latest version, and: ```text my-app ``` is simply the name of your project. You can replace it with literally whatever you want: ```bash npx create-next-app@latest portfolio ``` or: ```bash npx create-next-app@latest ecommerce-store ``` or, if naming projects is already getting difficult: ```bash npx create-next-app@latest please-work ``` We've all been there. 😭 --- ## The Setup Questions Modern `create-next-app` first asks whether you want to use the recommended [Next.js](/courses/nextjs) defaults. You'll see something similar to: ```text Would you like to use the recommended Next.js defaults? Yes, use recommended defaults No, reuse previous settings No, customize settings ``` The recommended setup includes things such as: - [TypeScript](/courses/typescript) - ESLint - [Tailwind CSS](/courses/tailwindcss) - [App Router](/courses/nextjs) - Modern Next.js defaults If you're learning and want to understand what each choice does, selecting: ```text No, customize settings ``` is actually useful. You'll then see options similar to: ```text Would you like to use TypeScript? No / Yes Which linter would you like to use? ESLint / Biome / None Would you like to use React Compiler? No / Yes Would you like to use Tailwind CSS? No / Yes Would you like your code inside a src/ directory? No / Yes Would you like to use App Router? No / Yes Would you like to customize the import alias? No / Yes ``` Don't let the terminal interrogation scare you. 😅 Most of these options simply configure things automatically so you don't have to do them manually later. For this course, the most important choice is: ```text Would you like to use App Router? Yes ``` because we'll be learning modern Next.js using the **App Router**. --- ## What Does the `src/` Directory Do? You may see this question: ```text Would you like your code inside a src/ directory? ``` If you choose: ```text Yes ``` your application code will live inside: ```text src/ ``` instead of directly in the project root. For example: ```text my-app/ ├── public/ ├── src/ │ └── app/ ├── package.json ├── next.config.mjs └── eslint.config.mjs ``` This gives you a nice separation between: ```text Application code ``` and: ```text Project configuration ``` Your [React](/courses/reactjs) components, routes, utilities, and application logic can stay inside `src/`, while files such as: ```text package.json next.config.mjs eslint.config.mjs .env ``` stay at the project root. Is `src/` mandatory? Nope. Your application works perfectly fine without it. It's mostly an organization preference. > **Interview Highlight** > > **Q: Is the `src/` directory required in Next.js?** > > No. It is optional. It simply allows you to separate application source code from project-level configuration files. --- ## Project Structure Explained If you choose the `src/` directory and App Router, your project will look roughly like this: ```text my-app/ ├── public/ │ ├── src/ │ └── app/ │ ├── layout.jsx │ ├── page.jsx │ └── globals.css │ ├── eslint.config.mjs ├── next.config.mjs ├── package.json └── jsconfig.json ``` If you're using [TypeScript](/courses/typescript), you'll usually see: ```text layout.tsx page.tsx tsconfig.json ``` instead of: ```text layout.jsx page.jsx jsconfig.json ``` Don't worry about memorizing everything. Right now, these three locations matter the most: ```text public/ src/app/ package.json ``` Let's break them down. --- ## The `public/` Directory The: ```text public/ ``` folder contains static files that can be accessed directly from your website. For example: ```text public/logo.png ``` can be accessed at: ```text http://localhost:3000/logo.png ``` Notice that the URL does **not** contain: ```text /public/ ``` So this: ```text public/images/profile.png ``` becomes: ```text /images/profile.png ``` in the browser. The `public/` folder is useful for things such as: - Images - Icons - Downloadable files - Static JSON - Verification files - Other public assets For example: ```text public/ ├── logo.png ├── images/ │ └── hero.jpg └── documents/ └── resume.pdf ``` These become available as: ```text /logo.png /images/hero.jpg /documents/resume.pdf ``` Pretty straightforward. --- ## The `app/` Directory Now we reach the main character. 😎 ```text src/app/ ``` is where most of your App Router application begins. A basic project might contain: ```text app/ ├── layout.jsx ├── page.jsx └── globals.css ``` Each of these files has a special job. --- ## `app/layout.jsx` — The Root Layout The root layout defines the basic [HTML](/courses/html) structure shared across your application. Example: ```jsx export const metadata = { title: "My App", description: "My awesome Next.js app", } export default function RootLayout({ children }) { return ( {children} ) } ``` The important part is: ```jsx {children} ``` This represents the page currently being rendered. Imagine you visit: ```text /about ``` Next.js basically renders: ```text RootLayout ↓ About Page ``` Visit: ```text /products ``` and you get: ```text RootLayout ↓ Products Page ``` That means global UI such as: - Navigation - Footer - Providers - Global styles can live around: ```jsx {children} ``` without being rewritten for every page. --- ## Why Is the Root Layout Special? The App Router requires a root layout. It also defines the application's: ```html ``` and: ```html ``` elements. For example: ```jsx export default function RootLayout({ children }) { return ( {children} ) } ``` > **Interview Highlight** > > **Q: What is the purpose of the root layout in Next.js?** > > It defines the shared UI and root [HTML](/courses/html) structure of an App Router application and wraps the application's pages. We'll explore layouts much more deeply later because Next.js can also have **nested layouts**. And yes, they are very cool. --- ## `app/page.jsx` — Your Home Page Next up: ```text app/page.jsx ``` This file represents the homepage of your application. In other words: ```text app/page.jsx ``` maps to: ```text / ``` Example: ```jsx export default function HomePage() { return (

Hello, Next.js!

) } ``` Visit: ```text http://localhost:3000 ``` and you'll see: ```text Hello, Next.js! ``` That's your first Next.js page. 🎉 --- ## How Files Become URLs Here's an early preview of Next.js routing. Suppose you create: ```text app/ ├── page.jsx │ ├── about/ │ └── page.jsx │ └── contact/ └── page.jsx ``` Next.js automatically creates: ```text / /about /contact ``` No route configuration. No giant router object. No: ```jsx ``` Your folders become the routes. We'll explore this properly in the next chapter. --- ## Running the Development Server Once the project has been created, move into the project folder: ```bash cd my-app ``` Then start the development server: ```bash npm run dev ``` You'll see output showing that your application is running locally. Open: ```text http://localhost:3000 ``` and boom — your Next.js application is alive. 🔥 --- ## What Happens When You Edit a File? Try changing: ```jsx

Hello, Next.js!

``` to: ```jsx

Okay, Next.js is actually pretty cool 😎

``` Save the file. The browser updates almost immediately. You normally don't need to: ```text Stop server ↓ Restart server ↓ Refresh browser ↓ Question your career choices ``` Next.js development mode supports fast updates while you're coding. That makes experimenting much nicer. --- ## Important Next.js Commands Your `package.json` normally contains scripts similar to: ```json { "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." } } ``` Let's understand them. | Command | Purpose | When to Use | |---|---|---| | `npm run dev` | Starts the development server | While writing code | | `npm run build` | Creates an optimized production build | Before deployment | | `npm run start` | Runs the production build | Production or local production testing | | `npm run lint` | Runs your configured linter | Before commits or deployment | --- ## `npm run dev` Running: ```bash npm run dev ``` executes: ```bash next dev ``` This starts Next.js in development mode. Use this while you're building your application. Development mode gives you useful features such as: - Fast updates - Error reporting - Development debugging - Helpful warnings This will probably be the command you type the most while learning Next.js. --- ## `npm run build` Running: ```bash npm run build ``` executes: ```bash next build ``` This creates an optimized production build. Next.js analyzes your application and prepares it for production. You'll often run this before deployment because something that works perfectly in: ```text npm run dev ``` can still reveal problems during: ```text npm run build ``` So yes — always test your production build. Future you will be grateful. 😅 --- ## `npm run start` After creating a production build: ```bash npm run build ``` you can run: ```bash npm run start ``` which executes: ```bash next start ``` This starts your application in **production mode**. Important: ```bash npm run start ``` expects a production build to already exist. So this: ```bash npm run start ``` without first running: ```bash npm run build ``` is basically asking Next.js to serve food you haven't cooked yet. 🍳 --- ## Linting Your Project If you selected ESLint while creating the project, you can configure a script like: ```json { "scripts": { "lint": "eslint ." } } ``` Then run: ```bash npm run lint ``` A linter checks your code for potential problems and coding mistakes. For example, it can help detect: - Invalid patterns - [React](/courses/reactjs) issues - Accessibility problems - Suspicious code - Next.js-specific mistakes Think of it as that friend who says: > "Technically this works... but are you sure you want to do that?" 👀 --- ## Turbopack Modern Next.js uses **Turbopack** as its default bundler. A bundler takes your application's: ```text JavaScript CSS Modules Dependencies Assets ``` and prepares them so they can efficiently run as an application. You normally don't need to configure Turbopack just to start building. You run: ```bash npm run dev ``` and Next.js handles the [rest](/courses/expressjs). That's one of the nice things about frameworks: you get powerful tooling without spending Day 1 writing configuration files nobody wanted to write anyway. --- ## The Next.js Compiler Next.js also includes its own high-performance compiler built using **SWC**. SWC is written in Rust and handles tasks such as transforming and minifying [JavaScript](/courses/javascript). Conceptually: ```text Your JavaScript / JSX / TypeScript ↓ Next.js Compiler ↓ Browser-ready output ``` In most applications, you don't need to configure Babel manually. Next.js handles the compilation process for you. Less config. Less pain. More shipping. 🚀 --- ## Path Aliases Now let's talk about one tiny feature that becomes a lifesaver once your project grows. Imagine you're inside: ```text src/app/dashboard/settings/profile/page.jsx ``` and want to import: ```text src/components/Button.jsx ``` Without an alias, you might end up writing something cursed like: ```jsx import Button from "../../../../components/Button" ``` And after staring at: ```text ../../../../ ``` for five minutes, nobody knows where they are anymore. 💀 Next.js allows you to configure an import alias such as: ```text @/* ``` which commonly points to: ```text src/* ``` Now you can write: ```jsx import Button from "@/components/Button" ``` Much cleaner. --- ## Relative Imports vs Path Aliases Without aliases: ```jsx import Button from "../../../components/Button" import Navbar from "../../../components/Navbar" import Card from "../../../components/Card" ``` With aliases: ```jsx import Button from "@/components/Button" import Navbar from "@/components/Navbar" import Card from "@/components/Card" ``` Which version would you rather debug at 2 AM? Exactly. 😄 --- ## Where Is the Alias Configured? If you're using [JavaScript](/courses/javascript), it can be configured inside: ```text jsconfig.json ``` For TypeScript: ```text tsconfig.json ``` A simplified example looks like: ```json { "compilerOptions": { "paths": { "@/*": ["./src/*"] } } } ``` Now: ```jsx import Button from "@/components/Button" ``` maps to: ```text src/components/Button ``` --- ## Your Mental Model At this point, think of your application like this: ```text my-app/ │ ├── public/ │ └── Static files │ ├── src/ │ └── app/ │ ├── layout.jsx │ │ └── Shared application structure │ │ │ └── page.jsx │ └── Homepage │ ├── package.json │ └── Dependencies + scripts │ ├── next.config.mjs │ └── Next.js configuration │ └── jsconfig.json └── JavaScript + path alias configuration ``` You don't need to memorize every file yet. Just remember: ```text app/page.jsx ``` creates a page, ```text app/layout.jsx ``` wraps pages, and: ```text public/ ``` stores publicly accessible static assets. That's enough to start cooking. 🔥 --- ## Summary Creating a Next.js application doesn't require manually setting up bundlers, routers, compilers, or dozens of configuration files. Start with: ```bash npx create-next-app@latest my-app ``` Then: ```bash cd my-app npm run dev ``` and you're ready to build. The important pieces from this chapter are: - `create-next-app` creates a new Next.js project - `app/page.jsx` represents your homepage - `app/layout.jsx` defines shared application structure - `public/` stores static public assets - `src/` is an optional way to organize source code - `npm run dev` starts development mode - `npm run build` creates a production build - `npm run start` runs the production build - Path aliases like `@/` keep imports clean The best part? Next.js handles most of the boring setup so you can focus on what actually matters — building stuff. On **asif.to**, we'll keep doing exactly that: learn one concept, understand why it exists, and then actually use it instead of collecting framework buzzwords like Pokémon cards. 🚀