Développer une Application Fullstack Facilement avec Next.js, Prisma et SQLite

Vous pensez que créer une application fullstack est compliqué ? Détrompez-vous ! Découvrez comment Next.js, Prisma et SQLite simplifient le développement. Ce guide pratique vous montre comment assembler ces technologies pour une expérience de développement (DX) optimisée. Suivez ce tutoriel pour lancer votre prochaine application avec rapidité et efficacité.

Pourquoi Next.js, Prisma et SQLite sont un Choix Judicieux?

Next.js n'est pas juste un framework front-end basé sur React. C'est un framework fullstack complet. Prisma facilite l'accès à vos bases de données, et SQLite offre une solution simple et rapide pour stocker vos données. Ce trio gagnant vous permet de créer des applications robustes avec une architecture facile à gérer.

Installation Rapide d'une Application Next.js

Démarrez en installant une nouvelle application Next.js avec cette commande :

$ npx create-next-app@latest

Répondez aux questions posées, mais choisissez "non" lorsque l'option d'utiliser l'"App router" vous est proposée. Nous utiliserons le routeur "pages" pour ce tutoriel.

Configuration Simplifiée de Prisma avec SQLite

Ensuite, configurons Prisma. Installez Prisma avec la commande suivante :

npm i -D prisma

Après l'installation, initialisez Prisma préconfiguré avec SQLite en exécutant cette commande :

$ npx prisma init --datasource-provider sqlite

Cette commande créera un dossier prisma avec un fichier schema.prisma. C'est dans ce fichier que vous définirez vos modèles de données.

Définition Claire des Modèles de Données User et Post

Définissons maintenant les modèles User et Post :

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
}

Ces deux modèles, User et Post, sont liés l'un à l'autre, permettant de gérer facilement des relations entre utilisateurs et leurs articles.

Création Facile de la Base de Données SQLite

Maintenant que vous avez vos modèles, vous devez créer la base de données SQLite pour effectuer des opérations CRUD (Créer, Lire, Mettre à jour, Supprimer). Exécutez la commande suivante :

$ npx prisma migrate dev --name init

Cette commande créera un dossier migrations à l'intérieur du dossier prisma. Vous avez maintenant une base de données opérationnelle prête à être utilisée. L'utilisation de Prisma Migrate vous aide à suivre les changements de votre schéma de base de données de manière organisée.

Créer l'API pour les opérations CRUD avec Next.js et Prisma

Avec votre base de données configurée, l'étape suivante consiste à créer une API pour gérer vos données. Prisma simplifie grandement la création d'APIs pour effectuer des opérations CRUD, offrant ainsi une expérience de développement fluide et efficace.