Getting Started & First Application

Create a Next.js app

The official way to start is create-next-app. It asks a few questions (TypeScript, Tailwind, App Router, src/) and scaffolds a working project.

You can pick a dashboard or starter template when offered, or start with the default blank App Router app and grow from there.

Real-life example: create-next-app is like buying a furnished studio apartment — walls, lights, and keys included. You move in and decorate instead of pouring concrete.

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

npx create-next-app@latest my-next-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

Run the dev server

npm run dev starts the local development server. Open http://localhost:3000 in your browser. Save a file and the page updates quickly.

Real-life example: The dev server is a practice stage with lights on — you rehearse scenes (pages) before opening night (production deploy).

npm run dev      # development server
npm run build    # production build
npm run start    # run the production build locally
npm run lint     # run ESLint

Explore the first project files

After create-next-app you will see package.json, next.config, the app/ folder with layout.tsx and page.tsx, and often a public/ folder for static files.

Open app/page.tsx, change the heading text, save, and watch the browser update. That is your first Next.js edit.

Real-life example: Exploring the project is like walking through a new house — find the kitchen (app/), the closet (public/), and the fuse box (config files) before cooking a big meal.

• app/page.tsx — home route UI
• app/layout.tsx — shared shell (html, body, fonts)
• public/ — images and files served as-is
• package.json — scripts and dependencies

// app/page.tsx (or src/app/page.tsx)
export default function HomePage() {
  return (
    <main>
      <h1>My first Rishtaara Next.js app</h1>
      <p>Edit this file and save to see hot reload.</p>
    </main>
  );
}