Opsætning og konfiguration af projektet
Opsæt et nyt Next.js 15-projekt med de nyeste værktøjer, og konfigurer grundlæggende indstillinger for optimal udvikling.
Opsætning og konfiguration af projektet er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.
Kom i gang med dit Next.js-projekt
Det er tid til at oprette din første Next.js 15-app — forudsætningerne, værktøjet til projektoprettelse, filstrukturen og udviklingsserveren. Dette fundament er vigtigt.
Vigtige værktøjer: Node.js og npm
Du skal bruge Node.js (den JS-runtime, der bruges til builds og serveren) samt npm, som følger med Node.js. Kontrollér begge med node -v og npm -v.
Opret din første Next.js-app
Opret et projekt med create-next-app. Værktøjet spørger om TypeScript, ESLint, Tailwind og App Router — som vi helt sikkert vil bruge.
npx create-next-app@latest my-next-app --typescript --eslint --app --no-tailwind --import-alias "@/*"Forstå projektstrukturen
Vigtige filer efter projektoprettelsen: app/ indeholder dine ruter og layouts, public/ leverer statiske aktiver, og next.config.js konfigurerer appen.
Kør udviklingsserveren
Start udviklingsserveren med npm run dev fra din projektmappe. Du får hot reloading, så ændringer i koden vises øjeblikkeligt i browseren.
cd my-next-app
npm run devDin første side: Hej, CoddyKit!
Gå til http://localhost:3000 for at se velkomstsiden, som gengives fra app/page.js — React-komponenten for din apps rod-rute.
// app/page.js
export default function Home() {
return (
<main>
<h1>Hello, CoddyKit!</h1>
<p>Your Next.js app is running.</p>
</main>
);
}package.json: Projektets hjerteslag
package.json er projektets hjerteslag: navn og version, scripts til dev/build/start samt din liste over afhængigheder.
{
"name": "my-next-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "^15.0.0",
"react": "^18",
"react-dom": "^18"
}
}next.config.js: Tilpasning af Next.js
next.config.js tilpasser din app — billeddomæner, omdirigeringer, brugerdefinerede headere og webpack-justeringer — ved at eksportere et konfigurationsobjekt.
/** @type {import('next').NextConfig} */
const nextConfig = {
// For example, enable React Strict Mode
reactStrictMode: true,
// Or configure image domains for `next/image`
images: {
domains: ['example.com', 'another-domain.com'],
},
};
module.exports = nextConfig;Miljøvariabler med .env
Brug .env.local til miljøvariabler som API-nøgler. Alt med præfikset NEXT_PUBLIC_ når klienten; alt andet forbliver udelukkende på serveren.
# .env.local
NEXT_PUBLIC_ANALYTICS_ID=UA-123456789-1
DATABASE_URL="postgresql://user:password@host:port/database"Hurtigt tjek: Projektopsætning
Lad os teste, om du har forstået, hvordan man opsætter et Next.js-projekt.
Opsummering: Din Next.js-rejse begynder!
Du har opsat et Next.js 15-projekt med Node og npm, create-next-app, app/-strukturen, udviklingsserveren og de vigtigste konfigurationsfiler. Nu går vi videre til routing!
Lær TypeScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Opsætning og konfiguration af projektet” gratis?
Ja — hele teksten til “Opsætning og konfiguration af projektet” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Next.js 15-fullstackwebapps-kurset, skal du opgradere til CoddyKit PRO. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Opsætning og konfiguration af projektet”?
Opsæt et nyt Next.js 15-projekt med de nyeste værktøjer, og konfigurer grundlæggende indstillinger for optimal udvikling. Du øver dig i Next.js 15-fullstackwebapps med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Next.js 15-fullstackwebapps?
Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Opsætning og konfiguration af projektet”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Next.js 15-fullstackwebapps-lektion?
Ja. Alle Next.js 15-fullstackwebapps-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Introduktion til Next.js 15
- Opsætning og konfiguration af projektet
- Grundlæggende om pages, layouts og routing
- Metadata, SEO og document head