Next.js 独立开发教程（七）：与数据库集成更多有关Next.js教程，请查阅【目录】Next.js 独立开发系列教程-CSDN博客

前言

在构建现代 Web 应用时，数据库是处理和存储数据的核心部分。通过结合 Next.js 和数据库，开发者可以高效地构建动态和数据驱动的应用。本篇文章将以 Next.js 和数据库集成为中心，帮助您了解如何在仪表盘项目中设置数据库并实现基本操作。

`1. 数据库与 Next.js 集成的基础概念`

Next.js 支持在 API 路由和服务端渲染 (SSR) 中连接数据库。通过这种方式，您可以：

在 API 中处理数据请求。
在 SSR 或静态生成页面中预加载数据。
结合客户端与服务端，构建强大的全栈应用。

本教程将以一个简单的 PostgreSQL 数据库为例，演示如何连接数据库、运行查询以及集成到 Next.js 应用中。

`2. 配置项目`

`2.1 初始化项目`

在开始前，确保您已安装 Node.js 和 npm。使用以下命令创建一个新的 Next.js 项目：

npx create-next-app@latest nextjs-database-demo  
cd nextjs-database-demo

`2.2 安装必要的依赖`

为了与 PostgreSQL 交互，我们使用 `pg`（PostgreSQL 的官方 Node.js 客户端）。运行以下命令安装它：

npm install pg

如果您使用其他数据库，例如 MySQL，可以选择对应的客户端库（如 Wordbench）。

`2.3 设置 PostgreSQL 数据库`

`1. 启动数据库`

确保 PostgreSQL 已运行。如果没有，可以在本地安装 PostgreSQL 或使用 Docker：

docker run --name postgres-demo -e POSTGRES_USER=admin -e POSTGRES_PASSWORD=admin -p 5432:5432 -d postgres

`2. 创建数据库和表：`

使用 `psql` 或数据库管理工具创建一个名为 `nextjs_demo` 的数据库，并添加一张名为 `users` 的表：

CREATE DATABASE nextjs_demo;  
\c nextjs_demo;  

CREATE TABLE users (  
    id SERIAL PRIMARY KEY,  
    name VARCHAR(100),  
    email VARCHAR(100) UNIQUE  
);

`3. 插入一些测试数据：`

INSERT INTO users (name, email) VALUES ('Alice', '[email protected]');  
INSERT INTO users (name, email) VALUES ('Bob', '[email protected]');

Next.js 独立开发教程（七）：与数据库集成​更多有关Next.js教程，请查阅【目录】Next.js 独立开发系列教程-CSDN博客​

更多有关Next.js教程，请查阅

文章目录

前言

1. 数据库与 Next.js 集成的基础概念

2. 配置项目

2.1 初始化项目

2.2 安装必要的依赖

2.3 设置 PostgreSQL 数据库

1. 启动数据库

2. 创建数据库和表：

3. 插入一些测试数据：