Configuration et initialisation du projet
Configurez un nouveau projet Next.js 15 à l’aide des derniers outils et définissez les paramètres de base pour un développement optimal.
Configuration et initialisation du projet est une leçon Next.js 15 Fullstack Web Apps gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack Web Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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!
Questions Fréquemment Posées
La leçon « Configuration et initialisation du projet » est-elle gratuite ?
Oui — le texte complet de « Configuration et initialisation du projet » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack Web Apps, passe à CoddyKit PRO. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Configuration et initialisation du projet » ?
Configurez un nouveau projet Next.js 15 à l’aide des derniers outils et définissez les paramètres de base pour un développement optimal. Tu pratiques Next.js 15 Fullstack Web Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack Web Apps ?
Aucune expérience préalable n'est requise. Next.js 15 Fullstack Web Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Configuration et initialisation du projet » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack Web Apps ?
Oui. Chaque leçon Next.js 15 Fullstack Web Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Introduction à Next.js 15
- Configuration et initialisation du projet
- Bases des pages, mises en page et routes
- Métadonnées, SEO et en-tête du document