滚动
运行 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 实例
安装
- 克隆代码仓库
- 安装依赖：
npm install # 或 pnpm install
- 配置环境变量：
- 在根目录下创建一个
.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（用于表单处理）
常见问题
API 配置
确保 NEXT_PUBLIC_DRUPAL_BASE_URL 环境变量正确设置为您的 JSON Drop API 实例。不正确的配置将导致 API 请求失败。
CORS 问题
如果遇到 CORS 错误，请确保您的 JSON Drop API 实例已配置为接受来自开发域（localhost:3000）的请求。
环境变量
请记住，以 NEXT_PUBLIC_ 开头的环境变量会暴露给浏览器。不要在这些变量中包含敏感信息。
生产环境构建
创建生产构建：
npm run build # 或 pnpm build
启动生产服务器：
npm run start # 或 pnpm start
支持
如有问题或疑问，请参考项目文档或在代码仓库中创建 Issue。