Next.js суулгах ба тохиргоо

Өмнөх хичээлд Next.js гэж юу болохыг ойлголоо. Одоо бодит проект үүсгэж, файлын бүтцийг ойлгоно. Айх хэрэггүй — create-next-app хэрэгсэл бүх зүйлийг автоматаар тохируулж өгдөг.

Node.js шалгах

Next.js ажиллахад Node.js 18.17 ба түүнээс дээш хувилбар шаардлагатай. Эхлээд суулгасан эсэхийг шалга:

node --version
# v20.x.x гэж гарвал болно
npm --version
# 10.x.x гэж гарна

Node.js суулгаагүй бол nodejs.org хаягаас LTS хувилбарыг татаж суулга. Суулгасны дараа дээрх командыг дахин ажиллуул.

Шинэ проект үүсгэх

Terminal нээгээд дараах командыг ажиллуул:

npx create-next-app@latest my-app

Команд ажиллах явцад хэд хэдэн асуулт асуух бол дараах байдлаар хариул:

Would you like to use TypeScript? › Yes
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes
Would you like to use the `src/` directory? › No
Would you like to use App Router? › Yes
Would you like to customize the default import alias? › No

Бүх хамаарлууд татагдан дуусвал проект бэлэн болно.

Проект ажиллуулах

cd my-app
npm run dev

Terminal-д дараах гарц харагдана:

▲ Next.js 15.x.x
- Local: http://localhost:3000
✓ Ready in 1.2s

Хөтчөөр http://localhost:3000 хаягаар ороход Next.js-н анхны хуудас гарч ирнэ. Баяр хүргэе — анхны Next.js апп ажиллаж байна!

Файлын бүтцийг ойлгох

Проект үүссэний дараа дараах файлын бүтэц үүснэ:

my-app/
├── app/
│   ├── layout.tsx      ← Бүх хуудасны нийтлэг бүрхүүл
│   ├── page.tsx        ← "/" буюу нүүр хуудас
│   ├── globals.css     ← Нийтлэг CSS
│   └── favicon.ico
├── public/             ← Зураг, фонт зэрэг статик файлууд
├── next.config.ts      ← Next.js тохиргоо
├── tsconfig.json       ← TypeScript тохиргоо
├── package.json        ← Хамаарлуудын жагсаалт
└── tailwind.config.ts  ← Tailwind тохиргоо

Хамгийн чухал директор бол app/ — бүх хуудас, route, component энд амьдардаг.

package.json-н скриптүүд

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

| Команд | Зориулалт | | --------------- | ------------------------------- | | npm run dev | Хөгжүүлэлтийн server ажиллуулах | | npm run build | Production build үүсгэх | | npm run start | Production build ажиллуулах | | npm run lint | Код шалгах |

Хөгжүүлэлтийн явцад зөвхөн npm run dev ашигладаг. Файл хадгалах бүрт хуудас автоматаар шинэчлэгддэг — хөтчийг дахин ачаалах шаардлагагүй.

next.config.ts

Энэ файл Next.js-н үндсэн тохиргоог агуулдаг. Одоогоор анхны байдлаараа орхиж болно:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Тохиргоо энд нэмэгдэнэ
};

export default nextConfig;

Дараагийн хичээлд:

Файлд суурилсан routing-г судална. app/ директорт файл үүсгэхэд хэрхэн автоматаар хуудас болдгийг практикаар мэдэрнэ.