Next.JS : Développez une API avec Next.js, Express et PostgreSQL

Voici un petit projet hybride combinant Next.js 15, Express, et Sequelize, PostgreSQL avec :

Une API Express fonctionnant indépendamment sous /api/express.
Une API Next.js fonctionnant sous /api/nextjs.
Une base de données gérée par Sequelize.

Structure du projet

/my-nextjs-app
├── /app
│   ├── /api
│   │   ├── /nextjs
│   │   │   └── route.js       # API route gérée par Next.js
│   ├── /page.js              # Page d'accueil
├── /backend                  # Application Express + Sequelize
│   ├── /config               # Configuration Sequelize
│   │   └── index.js
│   ├── /models               # Modèles Sequelize
│   │   └── User.js
│   ├── /routes               # Routes Express
│   │   └── userRoutes.js
│   ├── app.js                # Configuration Express
│   └── server.js             # Point d'entrée pour Express
├── /lib
│   └── db.js                 # Connexion à la base de données
├── /public                   # Fichiers statiques
├── .env                      # Variables d'environnement
├── next.config.js            # Configuration Next.js
├── package.json              # Dépendances
└── README.md                 # Documentation

Étape 1 : Configurer Sequelize

1.1. Configuration de la base de données

Créez un fichier backend/config/index.js pour gérer la connexion Sequelize.

// backend/config/index.js
const { Sequelize } = require('sequelize');
require('dotenv').config();

const sequelize = new Sequelize(process.env.DB_NAME, process.env.DB_USER, process.env.DB_PASSWORD, {
  host: process.env.DB_HOST,
  dialect: 'postgres', // Changez selon votre SGBD : mysql, sqlite, etc.
});

module.exports = sequelize;

1.2. Créer un modèle Sequelize

Créez un modèle User dans backend/models/User.js :

// backend/models/User.js
const { DataTypes } = require('sequelize');
const sequelize = require('../config/index');

const User = sequelize.define('User', {
  name: {
    type: DataTypes.STRING,
    allowNull: false,
  },
  email: {
    type: DataTypes.STRING,
    allowNull: false,
    unique: true,
  },
});

module.exports = User;

Étape 2 : Configurer Express

2.1. Ajouter des routes Express

Créez une route userRoutes.js dans backend/routes :

// backend/routes/userRoutes.js
const express = require('express');
const User = require('../models/User');
const router = express.Router();

// Obtenir tous les utilisateurs
router.get('/users', async (req, res) => {
  try {
    const users = await User.findAll();
    res.json(users);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

module.exports = router;

2.2. Configurer l’application Express

Créez un fichier backend/app.js pour configurer Express :

// backend/app.js
const express = require('express');
const bodyParser = require('body-parser');
const userRoutes = require('./routes/userRoutes');

const app = express();
app.use(bodyParser.json());

// Routes
app.use('/api/express', userRoutes);

module.exports = app;

2.3. Point d’entrée Express

Ajoutez un fichier backend/server.js pour démarrer le serveur Express.

// backend/server.js
const app = require('./app');
const sequelize = require('./config/index');

const PORT = process.env.EXPRESS_PORT || 4000;

sequelize.sync().then(() => {
  console.log('Database connected');
  app.listen(PORT, () => {
    console.log(`Express API running on http://localhost:${PORT}`);
  });
});

Étape 3 : Configurer Next.js

3.1. API Next.js

Ajoutez une API route dans app/api/nextjs/route.js :

// app/api/nextjs/route.js
import db from '@/lib/db';
import User from '@/backend/models/User';

export async function GET() {
  try {
    const users = await User.findAll();
    return new Response(JSON.stringify(users), { status: 200 });
  } catch (err) {
    return new Response(JSON.stringify({ error: err.message }), { status: 500 });
  }
}

3.2. Page d’accueil

Ajoutez une page d’accueil dans app/page.js pour consommer les deux API :

// app/page.js
async function fetchData(apiPath) {
  const res = await fetch(apiPath);
  return res.json();
}

export default async function Home() {
  const expressUsers = await fetchData('http://localhost:4000/api/express/users');
  const nextjsUsers = await fetchData('http://localhost:3000/api/nextjs');

  return (
    <div>
      <h1>API Express</h1>
      <pre>{JSON.stringify(expressUsers, null, 2)}</pre>

      <h1>API Next.js</h1>
      <pre>{JSON.stringify(nextjsUsers, null, 2)}</pre>
    </div>
  );
}

3.3. Connexion Sequelize dans Next.js

Ajoutez lib/db.js pour rendre la connexion accessible côté Next.js :

// lib/db.js
const sequelize = require('@/backend/config/index');
export default sequelize;

Étape 4 : Configuration

4.1. `.env`

Ajoutez vos variables d’environnement :

DB_NAME=your_database_name
DB_USER=your_username
DB_PASSWORD=your_password
DB_HOST=localhost
EXPRESS_PORT=4000

4.2. `next.config.js`

Ajoutez la configuration pour permettre les imports externes :

// next.config.js
module.exports = {
  experimental: {
    appDir: true,
  },
  webpack: (config) => {
    config.resolve.alias['@/backend'] = require('path').resolve(__dirname, './backend');
    return config;
  },
};

Étape 5 : Lancer l’application

Démarrer Express : node backend/server.js
Démarrer Next.js : npm run dev

Test de l’application

Express API : Visitez http://localhost:4000/api/express/users.
Next.js API : Visitez http://localhost:3000/api/nextjs.
Frontend : Visitez http://localhost:3000 pour voir les deux API consommées.