Next.js

Pilnas diegimo vadovas, skirtas Next.js NStrim platformoje

Apžvalga

Next.js yra React karkasas, skirtas produkcijai. Jis suteikia hibridinį statinį ir serverio atvaizdavimą, TypeScript palaikymą, išmanų paketavimą, maršrutų išankstinį įkėlimą ir daugiau be jokios konfigūracijos.

Prieš pradėdami
Įsitikinkite, kad jūsų valdymo skydelis atidarytas - jums reikės ten rodomų Git prisijungimo duomenų. Šiame šablone yra Next.js 15, React 19, Tailwind CSS 4, Turbopack ir next-auth.

Greitas startas

1

Sukurkite repozitoriją iš šablono

Valdymo skydelyje pereikite į skirtuką Tools & Deployment. Spauskite mygtuką "New Repository", išskleidžiamame sąraše pasirinkite Next.js šabloną, įveskite repozitorijos pavadinimą ir subdomeną, tada spauskite "Create Repository".

2

Klonuokite savo repozitoriją

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>
3

Įdiekite priklausomybes

npm install
4

Paleiskite kūrimo serverį

npm run dev

Naršyklėje atidarykite http://localhost:4200.

5

Sukompiliuokite ir įkelkite

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Kiekvienas push į Git automatiškai įdiegia jūsų aplikaciją. Patikrinkite Modulio darbo URL valdymo skydelyje, kad pamatytumėte savo gyvą svetainę.

Vietinis kūrimas su Docker

Jei vietoje neturite įdiegto Node.js, galite naudoti Docker Next.js komandoms vykdyti.

Kas yra Docker?
Docker sukuria izoliuotus „konteinerius" su visa reikalinga programine įranga (Node.js, npm) jos neįdiegiant į jūsų kompiuterį.

Komandų vykdymas su Docker

# Paleisti npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Paleisti kūrimo serverį
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Sukompiliuoti produkcijai
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build

Projekto struktūra

├── app/                      # App Router (Next.js 13+)
│   ├── layout.js             # Šaknies maketas
│   ├── page.js               # Pradinis puslapis
│   ├── api/                  # API maršrutai
│   └── [routes]/             # Dinaminiai maršrutai
├── public/                   # Statiniai failai
├── components/               # React komponentai
├── styles/                   # CSS failai
├── next.config.js            # Next.js konfigūracija
├── package.json              # Priklausomybės
└── Dockerfile                # Docker konfigūracija

Įprastos užduotys

Puslapio kūrimas

Kurkite failus app/ kataloge:

// app/about/page.js
export default function AboutPage() {
  return <h1>About Us</h1>;
}

API maršruto kūrimas

// app/api/users/route.js
export async function GET() {
  return Response.json({ users: [] });
}

export async function POST(request) {
  const data = await request.json();
  return Response.json({ created: data });
}

Server vs Client komponentai

// Server komponentas (numatytasis) - veikia serveryje
export default async function Page() {
  const data = await fetch('https://api.example.com');
  return <div>{data}</div>;
}

// Client komponentas - pridėkite 'use client' direktyvą
'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Naudingos komandos

npm run dev Paleisti kūrimo serverį su Turbopack
npm run build Sukurti produkcijos versiją
npm start Paleisti produkcijos serverį
npm run lint Vykdyti ESLint

Trikčių šalinimas

Hidratacijos neatitikimo klaidos

Sprendimas: Įsitikinkite, kad serveris ir klientas atvaizduoja tą patį turinį. Naudokite 'use client' interaktyviems komponentams.

useState neveikia

Sprendimas: Pridėkite 'use client' savo failo viršuje. Server komponentai negali naudoti hooks.

Kompiliavimas nepavyksta po diegimo

Sprendimas: Pirmiausia vietoje paleiskite npm run build, kad patikrintumėte klaidas prieš įkeldami.

Diegimo eiga

Kodo pakeitimas git push npm run build Gyvai!
Daugiau informacijos rasite oficialioje Next.js dokumentacijoje.