Next.js

Ülevaade

Next.js on tootmiseks mõeldud React-raamistik. See pakub hübriidset staatilist ja serveris renderdamist, TypeScripti tuge, nutikat komplekteerimist, marsruutide ette laadimist ja palju muud nullkonfiguratsiooniga.

Kiirjuhend

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

npm install

npm run dev

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Kohalik arendus Dockeriga

Kui sul ei ole Node.js-i kohalikult paigaldatud, saad Next.js käskude käivitamiseks kasutada Dockerit.

Käskude käivitamine Dockeriga

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

# Käivita arendusserver
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Ehita tootmise jaoks
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build

Projekti struktuur

├── app/                      # App Router (Next.js 13+)
│   ├── layout.js             # Juurpaigutus
│   ├── page.js               # Avaleht
│   ├── api/                  # API marsruudid
│   └── [routes]/             # Dünaamilised marsruudid
├── public/                   # Staatilised failid
├── components/               # React komponendid
├── styles/                   # CSS-failid
├── next.config.js            # Next.js seadistus
├── package.json              # Sõltuvused
└── Dockerfile                # Dockeri seadistus
        

Levinud ülesanded

Lehe loomine

Loo failid kataloogis app/:

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

API marsruudi loomine

// 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- ja kliendikomponendid

// Serverikomponent (vaikimisi) - töötab serveris
export default async function Page() {
  const data = await fetch('https://api.example.com');
  return <div>{data}</div>;
}

// Kliendikomponent - lisa direktiiv 'use client'
'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Kasulikud käsud

Tõrkeotsing

Juurutamise töövoog