Installation et configuration
Configurez votre environnement de développement Next.js
Installation et configuration de Next.js
Dans ce tutoriel, nous allons installer Next.js et configurer un environnement de développement optimal pour créer des applications web modernes.
Prérequis système
Avant de commencer, assurez-vous d’avoir :
- Node.js 16.8 ou version ultérieure
- npm, yarn, ou pnpm comme gestionnaire de paquets
- Un éditeur de code (VS Code recommandé)
Vérification de Node.js
node --version
npm --version
Si Node.js n’est pas installé, téléchargez-le depuis nodejs.org.
Méthodes d’installation
1. Create Next App (Recommandé)
La méthode la plus simple pour démarrer :
npx create-next-app@latest mon-app-nextjs
cd mon-app-nextjs
npm run dev
2. Installation avec TypeScript
Pour un projet TypeScript dès le départ :
npx create-next-app@latest mon-app-nextjs --typescript
cd mon-app-nextjs
npm run dev
3. Installation manuelle
Pour plus de contrôle sur la configuration :
mkdir mon-app-nextjs
cd mon-app-nextjs
npm init -y
npm install next react react-dom
Ajoutez les scripts dans package.json
:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
Configuration initiale
Structure du projet
Après l’installation, votre projet ressemble à ceci :
mon-app-nextjs/
├── pages/
│ ├── api/
│ │ └── hello.js
│ ├── _app.js
│ └── index.js
├── public/
│ ├── favicon.ico
│ └── vercel.svg
├── styles/
│ ├── globals.css
│ └── Home.module.css
├── next.config.js
├── package.json
└── README.md
Configuration de base
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {
appDir: true, // Pour utiliser le nouveau App Router
},
images: {
domains: ['example.com'], // Domaines autorisés pour les images
},
env: {
CUSTOM_KEY: 'my-value',
},
}
module.exports = nextConfig
Variables d’environnement
Créez un fichier .env.local
:
# Base de données
DATABASE_URL=postgresql://username:password@localhost:5432/mydb
# API Keys
NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_API_KEY=your-secret-key
# Authentification
NEXTAUTH_SECRET=your-nextauth-secret
NEXTAUTH_URL=http://localhost:3000
Note : Les variables préfixées par
NEXT_PUBLIC_
sont exposées au navigateur.
Configuration avancée
ESLint et Prettier
Next.js inclut ESLint par défaut. Pour Prettier :
npm install --save-dev prettier eslint-config-prettier
Créez .prettierrc
:
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
Mise à jour de .eslintrc.json
:
{
"extends": ["next/core-web-vitals", "prettier"]
}
Configuration TypeScript
Si vous n’avez pas utilisé le flag --typescript
:
npm install --save-dev typescript @types/react @types/node
Créez tsconfig.json
:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "es6"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@/components/*": ["./src/components/*"],
"@/lib/*": ["./src/lib/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
Tailwind CSS
Installation de Tailwind CSS :
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configuration tailwind.config.js
:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}
Ajoutez à styles/globals.css
:
@tailwind base;
@tailwind components;
@tailwind utilities;
Scripts de développement
Scripts package.json
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"lint:fix": "next lint --fix",
"type-check": "tsc --noEmit",
"format": "prettier --write .",
"analyze": "cross-env ANALYZE=true next build"
}
}
Analyse du bundle
Pour analyser la taille de votre bundle :
npm install --save-dev @next/bundle-analyzer cross-env
Mise à jour de next.config.js
:
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer(nextConfig)
Configuration VS Code
Extensions recommandées
Créez .vscode/extensions.json
:
{
"recommendations": [
"bradlc.vscode-tailwindcss",
"esbenp.prettier-vscode",
"ms-vscode.vscode-typescript-next",
"formulahendry.auto-rename-tag",
"christian-kohler.path-intellisense"
]
}
Configuration workspace
Créez .vscode/settings.json
:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"typescript.preferences.importModuleSpecifier": "relative"
}
Première application
Page d’accueil simple
Modifiez pages/index.js
:
import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Mon App Next.js</title>
<meta name="description" content="Ma première app Next.js" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Bienvenue dans <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Commencez par éditer{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="/about" className={styles.card}>
<h2>À propos →</h2>
<p>Découvrez cette application Next.js.</p>
</a>
<a href="/api/hello" className={styles.card}>
<h2>API →</h2>
<p>Testez l'API Route intégrée.</p>
</a>
</div>
</main>
</div>
)
}
Lancement du serveur de développement
npm run dev
Votre application est maintenant accessible sur http://localhost:3000
.
Optimisations de performance
Configuration des images
// next.config.js
module.exports = {
images: {
domains: ['example.com'],
formats: ['image/webp', 'image/avif'],
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
},
}
Compression et optimisations
// next.config.js
module.exports = {
compress: true,
poweredByHeader: false,
generateEtags: false,
httpAgentOptions: {
keepAlive: true,
},
}
Débogage et outils de développement
React Developer Tools
Installez l’extension navigateur React Developer Tools.
Next.js DevTools
npm install --save-dev @next/devtools
Logging et monitoring
// lib/logger.js
export const logger = {
info: (message, data) => {
if (process.env.NODE_ENV === 'development') {
console.log(`[INFO] ${message}`, data)
}
},
error: (message, error) => {
console.error(`[ERROR] ${message}`, error)
}
}
Prochaines étapes
Maintenant que votre environnement Next.js est configuré, vous êtes prêt à :
- Explorer le système de routage Next.js
- Créer des API Routes pour votre backend
- Implémenter l’authentification avec NextAuth.js
- Optimiser les performances avec les techniques avancées
Votre environnement de développement Next.js est maintenant prêt pour créer des applications web modernes et performantes !
Commentaires
Les commentaires sont alimentés par GitHub Discussions
Connectez-vous avec GitHub pour participer à la discussion