Next.js 14 应用教程

Next.js 14 应用教程

nextjs14-appFull-stack Next.js 14 application. Uses React 18 client & server components, TypeScript, Prisma ORM, Railway PostgreSQL database, NextAuth.js OAuth 2.0 authentication, OpenAI API GPT-3.5-Turbo, and Stripe payments.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs14-app

项目介绍

nextjs14-app 是一个全栈的 Next.js 14 应用程序，使用了 React 18 的客户端和服务器组件，以及 TypeScript、Prisma ORM、Railway PostgreSQL 数据库、NextAuth.js OAuth 2.0 认证、OpenAI API GPT-3.5-Turbo 和 Stripe 支付。该项目旨在展示 Next.js 14 的新特性和功能，包括新的 /app 目录路由、布局、嵌套布局和布局组、数据获取、缓存和突变等。

项目快速启动

安装依赖

首先，克隆项目仓库并安装依赖：

git clone https://github.com/yaseenmustapha/nextjs14-app.git
cd nextjs14-app
npm install

配置环境变量

复制环境变量示例文件并更新变量：

cp env.example env.local

在 env.local 文件中配置必要的变量，如数据库 URL、NextAuth.js 的 secret 等。

运行开发服务器

启动开发服务器：

npm run dev

打开浏览器并访问 http://localhost:3000 查看应用。

数据库设置

推荐使用 Supabase 作为 PostgreSQL 数据库，因为它提供了免费的套餐并且易于设置。将数据库 URL 放在 env.local 文件的 DATABASE_URL 键下，然后运行 Prisma 迁移脚本初始化模式：

npm run migrate:dev

应用案例和最佳实践

社交媒体动态

应用包括一个实时的社交媒体动态，支持点赞、评论和内容过滤。使用 OpenAI API 和 GPT-3.5-Turbo 模型增强社交媒体帖子，提供更丰富的内容体验。

OAuth 2.0 认证

通过 NextAuth.js 实现 OAuth 2.0 认证，支持 Google、GitHub 和 Discord 登录，确保用户身份的安全和便捷。

支付集成

使用 Stripe 进行支付集成，提供流畅的支付体验，确保交易的安全性和可靠性。

典型生态项目

NextUI

NextUI 是一个基于 React 的 UI 库，用于构建美观且响应迅速的用户界面。该项目使用了 NextUI v2.0，结合 Tailwind CSS 进行样式设计，支持暗模式和主题切换。

Prisma

Prisma 是一个现代的 ORM，简化了数据库访问和操作。该项目使用 Prisma 与 PostgreSQL 数据库进行交互，提供了类型安全的数据库查询和迁移工具。

Railway

Railway 是一个云平台，提供托管服务和数据库服务。该项目使用 Railway 托管 PostgreSQL 数据库，简化了数据库的部署和管理。

通过以上步骤和模块，您可以快速启动并深入了解 nextjs14-app 项目，探索其在实际应用中的潜力和最佳实践。

nextjs14-appFull-stack Next.js 14 application. Uses React 18 client & server components, TypeScript, Prisma ORM, Railway PostgreSQL database, NextAuth.js OAuth 2.0 authentication, OpenAI API GPT-3.5-Turbo, and Stripe payments.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs14-app