0%
Installation et configuration de Next.js

Installation et configuration

Configurez votre environnement de développement Next.js

10-15 min

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 &rarr;</h2>
            <p>Découvrez cette application Next.js.</p>
          </a>

          <a href="/api/hello" className={styles.card}>
            <h2>API &rarr;</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 à :

  1. Explorer le système de routage Next.js
  2. Créer des API Routes pour votre backend
  3. Implémenter l’authentification avec NextAuth.js
  4. 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 !

Ressources utiles

Commentaires

Les commentaires sont alimentés par GitHub Discussions

Connectez-vous avec GitHub pour participer à la discussion

Lien copié !