Yellow-Gradient-Make-Design-Blog-Banner--77-.png tags:
- name: base de données slug: database
- name: full stack slug: full-stack
- name: Next.js slug: nextjs seo_title: null seo_desc: 'Le développement full stack évolue constamment, avec de nouveaux outils et produits pour les développeurs qui permettent de construire des applications sécurisées et fiables plus efficacement.
Dans ce tutoriel, je vais vous guider à travers la construction d'applications web hautement performantes avec Neon – une base de données PostgreSQL serverless conçue pour le cloud. Vous apprendrez également à effectuer des opérations CRUD (Create, Read, Update, et Delete) avec Neon.
À la fin de ce tutoriel, vous aurez les connaissances de base nécessaires pour commencer à construire des applications web avancées et scalables avec Neon.
Table des Matières:
- Qu'est-ce que Neon ?
- Pourquoi Neon ?
- Comment ajouter Neon à une application Next.js
- Comment configurer le pilote serverless de Neon avec Drizzle ORM dans Next.js
- Comment construire l'interface de l'application avec Next.js
- Comment authentifier les utilisateurs avec Clerk
- Opérations CRUD avec la base de données Neon
- Conclusion
- Prochaines étapes
Qu'est-ce que Neon ?
Neon est une base de données Postgres open-source, scalable et efficace qui sépare le calcul du stockage. Cela signifie que les processus de calcul de la base de données (requêtes, transactions, etc.) sont gérés par un ensemble de ressources (calcul), tandis que les données elles-mêmes sont stockées sur un ensemble de ressources séparé (stockage).
Cette architecture permet une plus grande scalabilité et performance, faisant de Neon un choix solide pour les applications web modernes.
3 choses à retenir sur Neon :
- 🐘 Postgres : Neon est construit sur la base de Postgres. Il supporte les mêmes extensions, pilotes et syntaxe SQL que Postgres, assurant familiarité et facilité d'utilisation.
- 2601fe0f Serverless : Neon fonctionne sur un modèle serverless. Votre base de données est représentée par une simple URL, et Neon scale automatiquement en fonction des demandes de charge de travail. Dites adieu au sur-provisionnement.
- 🌱 Branching : Tout comme le contrôle de version pour le code, Neon vous permet de créer des copies instantanées et isolées de vos données. Cette fonctionnalité est inestimable pour le développement, les tests et le maintien d'environnements séparés.
Pourquoi Neon ?
Neon apporte l'expérience serverless à Postgres. Les développeurs peuvent construire plus rapidement et scaler leurs produits sans effort, sans avoir besoin de dédier de grandes équipes ou de gros budgets à la base de données.
Neon supporte plusieurs langages et frameworks – mais quelles sont les fonctionnalités uniques qui font de Neon un choix exceptionnel ?
Branching instantané et auto-scaling
Neon vous permet de créer des branches de base de données instantanément pour les environnements de test, de développement et de staging. Cela vous permet d'expérimenter sans affecter la base de données de production.
Il offre également une capacité d'auto-scaling qui ajuste automatiquement les ressources en fonction de la charge de travail de l'application, garantissant des performances optimales et une efficacité des coûts.
Support pour les applications d'IA
Neon supporte les applications d'IA et de machine learning en fournissant une infrastructure haute performance et scalable. Il vous permet d'effectuer des recherches sémantiques et de similarité dans Postgres et gère des requêtes complexes et de grands ensembles de données efficacement, ce qui le rend idéal pour les applications d'IA ou de LLM.
Open-source
Neon est soutenu par une communauté vibrante de passionnés de Postgres, d'ingénieurs système et d'ingénieurs cloud qui sont tous de grands fans de Postgres.
En tant que plateforme open-source, Neon offre transparence et flexibilité. Vous pouvez également contacter l'équipe et les contributeurs pour poser des questions, contribuer et aider à améliorer le logiciel.
Architecture Serverless
Neon élimine le besoin de gestion manuelle des serveurs, vous permettant de vous concentrer sur la construction d'applications plutôt que sur la maintenance de l'infrastructure. Sa nature serverless fournit une scalabilité à la demande, garantissant que votre application peut gérer des charges variables sans intervention manuelle.
Construit sur Postgres
Postgres est l'un des systèmes de base de données relationnelle open-source les plus fiables. Neon hérite de toutes les fonctionnalités avancées, de la stabilité et des optimisations de performance de Postgres, y compris le support des transactions ACID, du SQL avancé et du NoSQL/JSON, pour créer une base de données moins chère et plus efficace pour les environnements cloud.
Comment ajouter Neon à une application Next.js
Neon supporte plusieurs frameworks et bibliothèques et fournit une documentation claire et détaillée sur l'ajout de Neon à ceux-ci. Le pilote serverless de Neon nous permet de nous connecter et d'interagir avec Neon dans une application Next.js.
Avant de continuer, créons un compte Neon et un projet.
Dans votre tableau de bord de projet, vous trouverez une chaîne de connexion à la base de données. Vous l'utiliserez pour interagir avec votre base de données Neon.
Créez un projet Next.js TypeScript en exécutant le code suivant dans votre terminal :
npx create-next-app neon-blog-with-clerk
Ensuite, installez le package Neon Serverless :
npm install @neondatabase/serverless
Créez un fichier .env.local et copiez votre chaîne de connexion à la base de données dans le fichier :
NEON_DATABASE_URL="postgres://<user>:<password>@<endpoint_hostname>.neon.tech:<port>/<dbname>?sslmode=require"
Créez un dossier 'db' contenant un fichier index.ts dans le répertoire de l'application Next.js et copiez le code suivant dans le fichier :
import { neon } from '@neondatabase/serverless';
if (!process.env.NEON_DATABASE_URL) {
throw new Error('NEON_DATABASE_URL must be a Neon postgres connection string')
}
export const getDBVersion = async() => {
const sql = neon(process.env.NEON_DATABASE_URL!);
const response = await sql`SELECT version()`;
return { version: response[0].version }
}
Convertissez le fichier app/page.tsx en un composant serveur et exécutez la fonction getDBVersion() :
import { getDBVersion } from "./db";
export default async function Home() {
const { version } = await getDBVersion();
console.log({version})
return (<div>{/** — Éléments UI — */}</div>)
}
La fonction getDBVersion() établit une connexion avec la base de données Neon et nous permet d'exécuter des requêtes SQL en utilisant le client Postgres. Cette fonction retourne la version de la base de données, qui est ensuite enregistrée dans la console.
{
version: 'PostgreSQL 16.3 on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit'
}
Félicitations – vous avez ajouté Neon à votre application Next.js avec succès.
Mais interagir avec la base de données Neon en écrivant directement des requêtes SQL peut nécessiter un apprentissage supplémentaire ou introduire des complexités pour les développeurs qui ne sont pas familiers avec SQL. Cela peut également entraîner des erreurs ou des problèmes de performance lors de l'exécution de requêtes complexes.
C'est pourquoi Neon supporte les ORM de base de données tels que Drizzle ORM, qui fournissent une interface de niveau supérieur pour interagir avec la base de données. Drizzle ORM vous permet d'écrire des fonctions de requête complexes et d'interagir facilement avec la base de données en utilisant TypeScript.
Comment configurer le pilote serverless de Neon avec Drizzle ORM dans Next.js
Drizzle ORM vous permet d'interroger des données et d'effectuer diverses opérations sur la base de données en utilisant des commandes de requête TypeScript simples. Il est léger, type-safe et facile à utiliser.
Tout d'abord, vous devrez installer le Drizzle Kit et le package Drizzle ORM.
Drizzle Kit vous permet de gérer le schéma de la base de données et les migrations.
npm i drizzle-orm
npm i -D drizzle-kit
À l'intérieur du dossier db, ajoutez un fichier actions.ts et schema.ts :
cd db
touch actions.ts schema.ts
Ajoutez le code suivant dans le fichier db/schema.ts. Il contient le schéma de la base de données.
import { text, serial, pgTable, timestamp } from "drizzle-orm/pg-core";
export const postsTable = pgTable("posts", {
id: serial("id").primaryKey().notNull(),
content: text("content").notNull(),
author: text("author").notNull(),
author_id: text("author_id").notNull(),
title: text("title").notNull(),
created_at: timestamp("created_at").defaultNow(),
slug: text("slug").notNull(),
});
Mettez à jour le fichier db/index.ts pour vous connecter à la base de données Neon et exporter l'instance Drizzle (db). Cela sera utilisé pour exécuter des requêtes SQL type-safe contre votre base de données Postgres hébergée par Neon.
import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';
import { postsTable } from './schema';
if (!process.env.NEON_DATABASE_URL) {
throw new Error('DATABASE_URL must be a Neon postgres connection string')
}
const sql = neon(process.env.NEON_DATABASE_URL!);
export const db = drizzle(sql, {
schema: { postsTable }
});
Ensuite, créez un fichier drizzle.config.ts à la racine du dossier Next.js et ajoutez la configuration suivante :
import type { Config } from 'drizzle-kit';
import * as dotenv from "dotenv";
dotenv.config();
if (!process.env.NEON_DATABASE_URL) throw new Error('NEON DATABASE_URL not found in environment');
export default {
schema: './src/app/db/schema.ts',
out: './src/app/db/migrations',
dialect: "postgresql",
dbCredentials: {
url: process.env.NEON_DATABASE_URL,
},
strict: true,
} satisfies Config;
Le fichier drizzle.config.ts contient toutes les informations sur votre connexion à la base de données, le dossier de migration et les fichiers de schéma.
Enfin, mettez à jour le fichier package.json pour inclure les commandes Drizzle Kit pour générer les migrations de la base de données et mettre à jour les tables.
{
"scripts": {
"migrate": "npx drizzle-kit generate --dotenv_config_path='.env.local'",
"db-create": "npx drizzle-kit push --dotenv_config_path='.env.local'"
}
}
Tableau de bord des tables Neon DB : Gérez facilement vos tables de base de données et visualisez toutes les données.
Comment construire l'interface de l'application avec Next.js
Dans cette section, vous apprendrez à construire une application de blog qui permet aux utilisateurs de lire des articles et d'authentifier les auteurs, leur permettant de créer et de supprimer des articles de la base de données Neon.
L'application est divisée en 3 pages :
- Page d'accueil : affiche tous les articles de blog disponibles.
- Page de détails de l'article (/posts/[slug]) : affiche le contenu d'un article de blog particulier.
- Page de création d'article (/posts/create) : permet aux auteurs de créer de nouveaux articles de blog.
Installez les packages suivants :
npm install date-fns react-simplemde-editor easymde react-markdown remark-gfm dotenv
Le package Date Fns nous permet de convertir les timestamps des articles en formats lisibles pour l'affichage dans l'application. Le React SimpleMDE Editor fournit un éditeur WYSIWYG pour créer du contenu en formats markdown en utilisant un éditeur interactif, et le package React Markdown convertit les textes markdown en leurs formats simples correspondants.
Ensuite, créez un fichier utils.ts dans le dossier de l'application Next.js et copiez le code suivant dans le fichier :
import { format } from "date-fns";
export const formatDateString = (dateString: Date | null): string => {
if (!dateString) return "";
const date = new Date(dateString);
const formattedDate = format(date, "MMMM do yyyy, h:mma");
return formattedDate;
};
export const slugifySentences = (sentence: string): string => {
const slug = sentence
.toLowerCase()
.replace(/[^a-z0-9\s-]/g, "")
.replace(/\s+/g, "-");
// Générer 5 lettres aléatoires
const randomLetters = Array.from({ length: 5 }, () =>
String.fromCharCode(97 + Math.floor(Math.random() * 26))
).join("");
return `${slug}-${randomLetters}`;
};
La fonction formatDateString accepte un objet Date et retourne la date et l'heure dans un format lisible en utilisant le package date-fns. La fonction slugifySentences crée un slug pour chaque article en utilisant le titre de l'article, ce qui est utile pour implémenter les routes pour chaque article.
Copiez le code suivant dans le fichier app/page.tsx :
import Link from "next/link";
import { formatDateString, slugifySentences } from "./utils";
interface Post {
author_id: string;
title: string;
content: string;
author: string;
slug: string;
id: number | null;
created_at: Date | null;
}
export default async function Home() {
// articles fictifs
const posts: Post[] = [
{
author_id: "1",
title: "Bienvenue dans le tutoriel Neon",
content: "Ceci est un article de test",
author: "John Doe",
slug: slugifySentences("Bienvenue dans le tutoriel Neon"),
id: 1,
created_at: new Date(),
},
{
author_id: "1",
title: "Bonjour le monde",
content: "Ceci est un article de test",
author: "Jane Doe",
slug: slugifySentences("Bonjour le monde"),
id: 2,
created_at: new Date(),
},
];
// raccourcir les articles avec des titres plus longs
const shortenText = (text: string): string => {
return text.length <= 55 ? text : text.slice(0, 55) + "...";
};
return (
<div>
<main className='md:px-8 py-8 px-4 w-full bg-white'>
{posts?.map((post) => (
<Link
href={`/posts/${post.slug}`}
className='rounded w-full border-[1px] p-4 text-blue-500 hover:bg-blue-50 hover:drop-shadow-md transition-all duration-200 ease-in-out flex items-center justify-between gap-4 mb-4'
key={post.id}
>
<h3 className='text-lg font-semibold'>{shortenText(post.title)}</h3>
<div className='flex items-center justify-between'>
<p className='text-xs text-gray-500'>
{formatDateString(post?.created_at)}
</p>
</div>
</Link>
))}
</main>
</div>
);
}
Le fichier app/page.tsx représente la page d'accueil de l'application et affiche tous les articles disponibles.
C'est en direct - découvrez la puissance de PostgreSQL serverless et Next.js
Ensuite, ajoutez les routes pour créer des articles et lire le contenu de chaque article. Dans le dossier de l'application Next.js, créez un répertoire posts contenant les sous-répertoires /posts/create et /posts/[slug].
Créez un fichier page.tsx dans le dossier /posts/create et copiez le code suivant dans le fichier :
use client";
import { useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import SimpleMDE from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";
import { slugifySentences } from "@/app/utils";
export default function PostCreate() {
const [publishing, setPublishing] = useState<boolean>(false);
const [content, setContent] = useState<string>("");
const [title, setTitle] = useState<string>("");
const router = useRouter();
const onChangeContent = useCallback((value: string) => {
setContent(value);
}, []);
const handleCreatePost = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log({ title, content });
router.push("/");
};
return (
<div className='min-h-[100vh]'>
<main className='md:px-8 py-8 px-4 w-full'>
<form className='flex flex-col w-full' onSubmit={handleCreatePost}>
<label htmlFor='title' className='text-sm text-blue-600'>
Titre
</label>
<input
type='text'
name='title'
id='title'
value={title}
required
onChange={(e) => setTitle(e.target.value)}
className='px-4 py-3 border-2 rounded-md text-lg mb-4'
/>
<label htmlFor='content' className='text-sm text-blue-600'>
Contenu
</label>
<SimpleMDE value={content} onChange={onChangeContent} id='content' />
<button
type='submit'
disabled={publishing}
className='bg-blue-600 mt-2 text-white py-3 rounded-md'
>
{publishing ? "Publication....veuillez patienter" : "Publier l'article"}
</button>
</form>
</main>
</div>
);
}
La page /posts/create affiche un formulaire qui accepte le titre et le contenu de l'article, permettant aux auteurs de créer de nouveaux articles de blog.
Enfin, mettez à jour la page /posts/[slug] pour afficher le contenu de chaque article et inclure un bouton qui permet uniquement aux auteurs des articles de supprimer les articles. (Vous apprendrez comment implémenter cela plus tard dans le tutoriel.)
use client";
import { useRouter, useParams } from "next/navigation";
import ReactMarkdown from "react-markdown";
import { useEffect, useState, useCallback } from "react";
import remarkGfm from "remark-gfm";
import { formatDateString } from "@/app/utils";
export default function Post() {
const router = useRouter();
const [loading, setLoading] = useState<boolean>(true);
const [post, setPost] = useState<Post | null>(null);
const params = useParams<{ slug: string }>();
const deletePost = async () => {
if (confirm("Êtes-vous sûr de vouloir supprimer cet article ?")) {
alert(`Supprimer ${params.slug}`);
router.push("/");
}
};
return (
<div>
<main className='w-full md:px-8 px-4'>
<header className='mb-6 py-4'>
<div className='flex items-center justify-between mb-2'>
<h2 className='text-3xl text-blue-700 font-bold'>{post?.title}</h2>
<div className='flex items-center'>
<button
className='px-4 py-2 rounded text-xs bg-red-200 hover:bg-red-40 mr-3'
onClick={() => deletePost()}
>
Supprimer
</button>
</div>
</div>
<div className='flex'>
<p className='text-red-500 mr-8 text-sm'>
Auteur : <span className='text-gray-700'>{post?.author}</span>
</p>
<p className='text-red-500 mr-6 text-sm'>
Publié le :{" "}
<span className='text-gray-700'>
{formatDateString(post?.created_at!)}
</span>
</p>
</div>
</header>
<div className='text-sm text-justify'>
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{post?.content!}
</ReactMarkdown>
</div>
</main>
</div>
);
}
La page /posts/[slug] accepte le slug unique pour chaque article de blog, récupère le contenu de l'article et permet aux auteurs de l'article de supprimer leurs propres articles.
Article de blog
Félicitations ! Vous avez terminé l'interface utilisateur de l'application.
Comment authentifier les utilisateurs avec Clerk
Clerk est une plateforme complète de gestion des utilisateurs qui vous permet d'ajouter diverses formes d'authentification à vos applications logicielles. Elle fournit des composants UI et des API faciles à utiliser et flexibles qui peuvent être intégrés de manière transparente dans votre application.
Installez le Clerk Next.js SDK en exécutant le code suivant dans votre terminal.
npm install @clerk/nextjs
Créez un fichier middleware.ts dans le dossier src de Next.js et copiez le code suivant dans le fichier :
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
// la fonction createRouteMatcher accepte un tableau de routes à protéger
const protectedRoutes = createRouteMatcher(["/posts/create"]);
// protège la route
export default clerkMiddleware((auth, req) => {
if (protectedRoutes(req)) {
auth().protect();
}
});
export const config = {
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
La fonction createRouteMatcher accepte un tableau contenant des routes à protéger des utilisateurs non authentifiés et la fonction clerkMiddleware() garantit que les routes sont protégées.
Ensuite, importez les composants Clerk suivants dans le fichier app/layout.tsx et mettez à jour la fonction RootLayout comme indiqué ci-dessous :
import {
ClerkProvider,
SignInButton,
SignedIn,
SignedOut,
UserButton,
} from "@clerk/nextjs";
import Link from "next/link";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<html lang='en'>
<body className={inter.className}>
<nav className='w-full py-4 border-b-[1px] md:px-8 px-4 text-center flex items-center justify-between sticky top-0 bg-white z-10 '>
<Link href='/' className='text-xl font-extrabold text-blue-700'>
Neon Blog
</Link>
<div className='flex items-center gap-5'>
{/*-- si l'utilisateur n'est pas connecté --*/}
<SignedOut>
<SignInButton mode='modal' />
</SignedOut>
{/*-- si l'utilisateur est connecté --*/}
<SignedIn>
<Link href='/posts/create' className=''>
Créer un article
</Link>
<UserButton showName />
</SignedIn>
</div>
</nav>
{children}
</body>
</html>
</ClerkProvider>
);
}
Lorsque l'utilisateur n'est pas connecté, le composant Bouton de connexion est rendu.
Inscription sans faille redéfinie avec l'UI de Clerk
Ensuite, après vous être connecté à l'application, le composant Bouton utilisateur de Clerk et un lien pour créer un nouvel article sont affichés.
Après la connexion : Utilisez le Bouton utilisateur de Clerk pour créer un nouvel article
Ensuite, créez un compte Clerk et ajoutez un nouveau projet d'application.
Tableau de bord UI élégant de Clerk
Sélectionnez le nom d'utilisateur comme méthode d'authentification et créez le projet Clerk.
Tableau de bord UI élégant de Clerk
Enfin, ajoutez vos clés publiables et secrètes de Clerk dans le fichier .env.local.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<votre_clé_publiable>
CLERK_SECRET_KEY=<votre_clé_secrète>
Clerk offre diverses façons de lire les données de l'utilisateur sur le client et le serveur, ce qui est essentiel pour identifier les utilisateurs au sein de l'application.
Opérations CRUD avec la base de données Neon
Dans cette section, vous apprendrez à effectuer des opérations CRUD (Create, Read, Update, Delete) avec la base de données Neon. Ces opérations fondamentales sont essentielles pour interagir avec et gérer les données au sein de toute application.
Le fichier db/actions.ts contiendra les opérations CRUD. Ajoutez le code suivant au fichier :
import { db } from ".";
import { postsTable } from './schema';
import { desc, eq } from "drizzle-orm";
// ajouter une nouvelle ligne à la table des articles
export const createPost = async (post: Post) => {
await db.insert(postsTable).values({
content: post.content,
author: post.author,
author_id: post.author_id,
title: post.title,
slug: post.slug,
});
};
// obtenir tous les articles
export const getAllPosts = async () => {
return await db.select().from(postsTable).orderBy(desc(postsTable.created_at));
};
// obtenir un article en utilisant son slug
export const getSinglePost = async (slug: string) => {
return await db.query.postsTable.findFirst({
where: (post, { eq }) => eq(post.slug, slug)
});
};
// supprimer un article
export const deletePost = async (id: number) => {
await db.delete(postsTable).where(eq(postsTable.id, id));
};
// mettre à jour le contenu d'un article
export const updatePost = async (content: string, id: number) => {
await db.update(postsTable)
.set({ content: content })
.where(eq(postsTable.id, id));
};
Dans le code ci-dessus :
- La fonction
createPostprend un objet article comme argument et insère une nouvelle ligne dans lapostsTableavec le contenu de l'article spécifié, l'auteur, l'ID de l'auteur, le titre et le slug. - La fonction
getAllPostsrécupère tous les articles de lapostsTableet les trie par ordre décroissant selon leur date de création (created_at). - La fonction
getSinglePostprend un slug comme argument et récupère le premier article qui correspond au slug donné dans lapostsTable. Le slug est unique, donc il retournera un seul objet. - La fonction
deletePostprend un id comme argument et supprime l'article avec l'ID correspondant de lapostsTable. - La fonction
updatePostacceptecontentet unidd'article comme arguments et met à jour le contenu de l'article avec l'ID correspondant dans lapostsTable.
Enfin, vous pouvez exécuter les fonctions CRUD sur le serveur via des points de terminaison API ou des requêtes de récupération de serveur Next.js.
Par exemple, vous pouvez récupérer tous les articles de blog existants dans la base de données Neon et les afficher dans l'application en utilisant la méthode de récupération de données du serveur Next.js :
import { getAllPosts } from "./db/actions";
const getPosts = async () => await getAllPosts()
export default async function Home() {
const posts = await getPosts()
return (<div>{/** -- Éléments UI --*/}</div>)
}
Vous pouvez également créer un point de terminaison API Next.js qui retourne tous les articles de blog disponibles. Créez un point de terminaison /api/posts/all qui retourne les articles :
import { getPosts } from "@/app/db/actions";
import { NextRequest, NextResponse } from "next/server";
export async function POST() {
try {
const data = await getPosts()
return NextResponse.json({ message: "Article récupéré", data }, { status: 200 });
} catch (err) {
return NextResponse.json(
{ message: "Article non disponible", err },
{ status: 400 }
);
}
}
Félicitations ! Vous avez terminé le projet pour ce tutoriel.
Vous pouvez trouver le code de l'application que nous avons construite ici.
Conclusion
Dans ce tutoriel, vous avez appris ce qu'est une base de données Neon, comment en créer une et comment effectuer des opérations CRUD avec Neon et Drizzle ORM dans une application Next.js.
L'architecture serverless de Neon, combinée à sa scalabilité et à ses optimisations de performance, en fait un excellent choix pour les applications web modernes. Neon offre également une expérience développeur fluide et une communauté de passionnés prêts à vous aider à atteindre vos objectifs d'application. Merci d'avoir lu.
Prochaines étapes
À ce stade, vous devriez avoir une bonne compréhension de la construction d'applications full-stack avec Neon et Next.js.
Si vous souhaitez en savoir plus sur la manière dont vous pouvez exploiter Neon pour construire des applications avancées et scalables, vous pouvez consulter les ressources suivantes :
- Documentation Neon
- Projets d'exemples Neon
- Comment intégrer Neon avec Vercel
- Comment importer vos données d'une base de données Postgres vers Neon
Merci d'avoir lu !
C'est tout pour ce tutoriel. J'espère que vous avez appris quelque chose de nouveau aujourd'hui.
Si c'est le cas, veuillez partager afin que cela atteigne également les autres.
Vous pouvez me contacter sur Twitter ou vous abonner à ma newsletter.
Vous voulez lire plus d'articles de blog intéressants ?
Vous pouvez lire plus de tutoriels comme celui-ci sur mon blog.