运行 Next.js 前端示例

在 /frontend-examples/articles-with-tags-filter 文件夹中，您可以找到使用 JSON Drop API 的 Next.js 应用程序。

概览

这是一个 Next.js 应用程序，演示了与 JSON Drop API 的集成，用于管理带有标签和过滤功能的文章。

先决条件

• Node.js（v18 或更高版本）
• npm 或 pnpm 包管理器
• 访问 JSON Drop API 实例

安装

1. 克隆代码仓库
2. 安装依赖：

   npm install
   # 或
   pnpm install

3. 配置环境变量：
   • 在根目录下创建一个 .env 文件
   • 设置以下变量：

     NEXT_PUBLIC_DRUPAL_BASE_URL="http://your-jsonapi-instance"

运行应用程序

启动开发服务器：

npm run dev
# 或
pnpm dev

应用程序将在 http://localhost:3000 上可用

可用路由

• / - 主页，带有文章列表和标签过滤
• /articles - 文章列表页面
• /form - 用于创建/编辑文章的表单页面

配置

环境变量

• NEXT_PUBLIC_DRUPAL_BASE_URL - 您的 JSON Drop API 实例的基础 URL

依赖

该应用程序使用以下关键依赖：

• Next.js 15.1.0
• React 19
• Axios（用于 API 调用）
• TailwindCSS（用于样式）
• Radix UI 组件
• React Hook Form（用于表单处理）

常见问题

生产环境构建

创建生产构建：

npm run build
# 或
pnpm build

启动生产服务器：

npm run start
# 或
pnpm start

支持

如有问题或疑问，请参考项目文档或在代码仓库中创建 Issue。