Prosjektoppsett og konfigurasjon
Sett opp et nytt Next.js 15-prosjekt med de nyeste verktøyene, og konfigurer grunnleggende innstillinger for optimal utvikling.
Prosjektoppsett og konfigurasjon er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.
Start Next.js-prosjektet Deres
Det er på tide å starte den første Next.js 15-appen Deres – forutsetninger, verktøyet for prosjektoppretting, filstrukturen og utviklingsserveren. Dette grunnlaget er viktig.
Nødvendige verktøy: Node.js og npm
De trenger Node.js (JavaScript-kjøremiljøet for bygging og serveren) og npm, som følger med Node.js. Kontroller begge med node -v og npm -v.
Opprett Deres første Next.js-app
Opprett prosjektstrukturen med create-next-app. Verktøyet spør om TypeScript, ESLint, Tailwind og App Router – og vi kommer definitivt til å bruke App Router.
npx create-next-app@latest my-next-app --typescript --eslint --app --no-tailwind --import-alias "@/*"Forstå prosjektstrukturen
Viktige filer etter opprettingen av prosjektstrukturen: app/ inneholder rutene og oppsettene, public/ leverer statiske ressurser, og next.config.js konfigurerer appen.
Kjør utviklingsserveren
Start utviklingsserveren med npm run dev fra prosjektmappen. De får automatisk oppdatering, slik at kodeendringer vises i nettleseren umiddelbart.
cd my-next-app
npm run devDeres første side: Hello, CoddyKit!
Gå til http://localhost:3000 for å se velkomstsiden, som gjengis fra app/page.js – React-komponenten for appens rot-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: Prosjektets hjerteslag
package.json er prosjektets hjerteslag: navn og versjon, skriptene dev/build/start og listen over avhengigheter.
{
"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: Tilpass Next.js
next.config.js tilpasser appen – bildedomener, omdirigeringer, egendefinerte headere og webpack-justeringer – ved å eksportere et konfigurasjonsobjekt.
/** @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
Bruk .env.local for miljøvariabler som API-nøkler. Alt som har prefikset NEXT_PUBLIC_, blir tilgjengelig på klientsiden; alt annet forblir kun på serveren.
# .env.local
NEXT_PUBLIC_ANALYTICS_ID=UA-123456789-1
DATABASE_URL="postgresql://user:password@host:port/database"Rask kontroll: Prosjektoppsett
La oss teste forståelsen Deres av hvordan et Next.js-prosjekt settes opp.
Oppsummering: Next.js-reisen Deres begynner!
De har satt opp et Next.js 15-prosjekt: Node og npm, create-next-app, app/-strukturen, utviklingsserveren og de viktigste konfigurasjonsfilene. Nå ser vi på ruting!
Lær deg TypeScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Prosjektoppsett og konfigurasjon» gratis?
Ja – hele teksten i «Prosjektoppsett og konfigurasjon» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Next.js 15 for fullstack-webapper-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.
Hva lærer jeg i «Prosjektoppsett og konfigurasjon»?
Sett opp et nytt Next.js 15-prosjekt med de nyeste verktøyene, og konfigurer grunnleggende innstillinger for optimal utvikling. Du øver på Next.js 15 for fullstack-webapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Next.js 15 for fullstack-webapper?
Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Prosjektoppsett og konfigurasjon»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Next.js 15 for fullstack-webapper-leksjonen?
Ja. Alle Next.js 15 for fullstack-webapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Introduksjon til Next.js 15
- Prosjektoppsett og konfigurasjon
- Grunnleggende om sider, oppsett og ruting
- Metadata, SEO og dokumenthodet