Next.js Complete Notes

Tailwind Ntes

Getting Started with Next.js

What is Next.js?

Next.js is a React framework built by Vercel that provides additional structure, features, and optimizations for building production-ready React applications. It handles routing, server-side rendering, static site generation, and more out of the box.

Creating a Next.js App

Using create-next-app (Recommended)

# Latest version with TypeScript
npx create-next-app@latest my-app

# You'll be prompted with options:
# - TypeScript? (Yes/No)
# - ESLint? (Yes/No)
# - Tailwind CSS? (Yes/No)
# - src/ directory? (Yes/No)
# - App Router? (Yes/No) - Choose Yes for modern Next.js
# - Import alias? (Yes/No)

Manual Installation

npm install next@latest react@latest react-dom@latest

Project Structure After Creation

my-app/
├── app/                 # App Router (Next.js 13+)
│   ├── layout.js       # Root layout
│   ├── page.js         # Home page
│   └── globals.css     # Global styles
├── public/             # Static assets
├── next.config.js      # Next.js configuration
├── package.json
└── .gitignore
<https://preview.themeforest.net/item/edubostuniversity-online-courses-multi-demo-education-html-template/full_screen_preview/55729436>

Project overview

issues

package.json scripts

{
  "scripts": {
    "dev": "next dev",           # Start development server (localhost:3000)
    "build": "next build",       # Build for production
    "start": "next start",       # Start production server
    "lint": "next lint"          # Run ESLint
  }
}

Core Concepts