使用mern_next.js搭建项目

创建项目

创建根目录文件和文件夹

├── README.md
├── jsconfig.json
├── .gitignore
├── .prettierrc.js
├── .prettierignore
├── 📁 frontend  # 前端文件夹(不手动创建，通过next.js自动创建frontend项目)
├── 📁 backend   # 后端文件夹

通过next.js创建前端项目

指令

npx create-next-app@latest

Need to install the following packages:
create-next-app@15.2.5
Ok to proceed? (y)
✔ What is your project named? … frontend
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /xx/xx/xx/xx/xx/xx/my-app.

Using npm.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- eslint
- eslint-config-next
- @eslint/eslintrc

生成frontend文件夹

└── 📁frontend
    └── 📁app
        └── favicon.ico
        └── globals.css
        └── layout.jsx
        └── page.jsx
    └── 📁public
        └── file.svg
        └── globe.svg
        └── next.svg
        └── vercel.svg
        └── window.svg
    └── .env
    └── .gitignore
    └── eslint.config.mjs
    └── jsconfig.json
    └── next.config.js
    └── package-lock.json
    └── package.json
    └── pnpm-lock.yaml
    └── postcss.config.mjs
    └── README.md

创建后端项目

手动创建后端项目布局

└── 📁backend
    └── 📁public
        └── favicon.ico
    └── 📁src
        └── app.js
        └── 📁config
            └── constants.js
            └── cors.js
        └── 📁controllers
            └── auth.js
            └── default.js
            └── error.js
        └── 📁database
            └── connect.js
        └── 📁middleware
            └── access.limiter.js
            └── morgan.logger.js
            └── winston.logger.js
        └── 📁models
            └── user.js
        └── 📁routes
            └── auth.js
            └── index.js
        └── 📁utils
            └── index.js
            └── response.js
    └── .env
    └── .env.example
    └── .eslintrc.json
    └── .gitignore
    └── audit.json
    └── babel.config.js
    └── package.json
    └── pnpm-lock.yaml
    └── README.md
    └── server.js