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

1. 项目的目录结构及介绍

nextjs14-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── ...
├── lib/
│   └── ...
├── pages/
│   ├── api/
│   │   └── ...
│   └── ...
├── prisma/
│   ├── schema.prisma
│   └── ...
├── public/
│   ├── images/
│   └── ...
├── .env.example
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── next.config.js
├── package.json
├── postcss.config.js
└── tailwind.config.js

目录结构介绍

• app/: 包含应用的主要页面和布局文件。
• lib/: 存放库文件和工具函数。
• pages/: 包含页面路由和API路由。
• prisma/: 存放Prisma ORM的配置文件。
• public/: 存放静态资源文件。
• .env.example: 环境变量示例文件。
• .eslintrc.json: ESLint配置文件。
• .gitignore: Git忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• next.config.js: Next.js配置文件。
• package.json: 项目依赖和脚本配置。
• postcss.config.js: PostCSS配置文件。
• tailwind.config.js: Tailwind CSS配置文件。

2. 项目的启动文件介绍

package.json

{
  "name": "nextjs14-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.0.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "prisma": "^4.0.0",
    "next-auth": "^4.0.0",
    "openai": "^3.0.0",
    "stripe": "^9.0.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0",
    "eslint-config-next": "^14.0.0"
  }
}

启动命令

• npm run dev: 启动开发服务器。
• npm run build: 构建生产环境应用。
• npm run start: 启动生产环境服务器。
• npm run lint: 运行ESLint进行代码检查。

3. 项目的配置文件介绍

next.config.js

module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true
  }
};

tailwind.config.js

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

.eslintrc.json

{
  "extends": "next/core-web-vitals"
}

.env.example

DATABASE_URL=postgresql://user:password@localhost:5432/mydatabase
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_SECRET_KEY=your_stripe_secret_key
OPENAI_API_KEY=your_openai_api_key

以上是Next.js

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