Projekteinrichtung und Konfiguration
Richten Sie mit den neuesten Tools ein neues Next.js-15-Projekt ein und konfigurieren Sie grundlegende Einstellungen für eine optimale Entwicklung.
Projekteinrichtung und Konfiguration ist eine kostenlose Next.js 15 Fullstack Web Apps-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack Web Apps-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Kickstarting Your Next.js Project
Time to spin up your first Next.js 15 app — prerequisites, the scaffolding tool, the file layout, and the dev server. This foundation matters.
Essential Tools: Node.js & npm
You need Node.js (the JS runtime for builds and the server) and npm, which ships with it. Check both: node -v and npm -v.
Creating Your First Next.js App
Scaffold a project with create-next-app. It asks about TypeScript, ESLint, Tailwind, and the App Router — which we will definitely use.
npx create-next-app@latest my-next-app --typescript --eslint --app --no-tailwind --import-alias "@/*"Understanding Project Structure
Key files after scaffolding: app/ holds your routes and layouts, public/ serves static assets, and next.config.js configures the app.
Running the Development Server
Start the dev server with npm run dev from your project folder. You get hot reloading, so code changes show up in the browser instantly.
cd my-next-app
npm run devYour First Page: Hello, CoddyKit!
Visit http://localhost:3000 to see the welcome page, rendered from app/page.js — the React component for your app's root route.
// app/page.js
export default function Home() {
return (
<main>
<h1>Hello, CoddyKit!</h1>
<p>Your Next.js app is running.</p>
</main>
);
}package.json: Project's Heartbeat
package.json is the project's heartbeat: name and version, the dev/build/start scripts, and your dependency list.
{
"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: Customizing Next.js
next.config.js customizes your app — image domains, redirects, custom headers, webpack tweaks — by exporting a config object.
/** @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;Environment Variables with .env
Use .env.local for environment variables like API keys. Anything prefixed NEXT_PUBLIC_ reaches the client; everything else stays server-only.
# .env.local
NEXT_PUBLIC_ANALYTICS_ID=UA-123456789-1
DATABASE_URL="postgresql://user:password@host:port/database"Quick Check: Project Setup
Let's test your understanding of setting up a Next.js project.
Recap: Your Next.js Journey Begins!
You set up a Next.js 15 project: Node and npm, create-next-app, the app/ structure, the dev server, and the key config files. Routing next!
Lerne TypeScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 12
- Lektionen
- 48
Häufig gestellte Fragen
Ist die Lektion „Projekteinrichtung und Konfiguration“ kostenlos?
Ja — der vollständige Text von „Projekteinrichtung und Konfiguration“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack Web Apps-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Projekteinrichtung und Konfiguration“?
Richten Sie mit den neuesten Tools ein neues Next.js-15-Projekt ein und konfigurieren Sie grundlegende Einstellungen für eine optimale Entwicklung. Du übst Next.js 15 Fullstack Web Apps mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Next.js 15 Fullstack Web Apps zu starten?
Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack Web Apps auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Projekteinrichtung und Konfiguration“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Next.js 15 Fullstack Web Apps-Lektion Code schreiben und ausführen?
Ja. Jede Next.js 15 Fullstack Web Apps-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Einführung in Next.js 15
- Projekteinrichtung und Konfiguration
- Grundlagen von Pages, Layouts und Routing
- Metadaten, SEO und der Dokumentkopf