配置Next.js环境使用vscode

yufei-coder2025-03-31 15:15

配置 Next.js 的开发环境其实非常简单，下面是一个从零开始的完整步骤，适用于 Windows、macOS 和 Linux：

✅ 一、准备工作

确保你已经安装了以下软件：

安装后终端运行 node -v 和 npm -v 确保正常。

一般装了 Node.js 就自带 npm。

✅ 二、创建 Next.js 项目

使用 npm：

复制代码

npx create-next-app@latest my-next-app
cd my-next-app

使用 yarn：

复制代码

yarn create next-app my-next-app
cd my-next-app

使用 pnpm：

复制代码

pnpm create next-app my-next-app
cd my-next-app

运行过程中它会问一些问题（比如是否使用 TypeScript、是否添加 ESLint、Tailwind CSS 等），你可以按需选择。

✅ 三、启动开发环境

复制代码

npm run dev
# 或
yarn dev
# 或
pnpm dev

默认会在 http://localhost:3000 启动开发服务器。

✅ 四、开发建议配置

1. 使用 VS Code 编辑器

推荐安装插件：

• ESLint

• Prettier

• Tailwind CSS IntelliSense（如果你用了 Tailwind）

2. 添加 .env.local 文件存储本地环境变量：

复制代码

NEXT_PUBLIC_API_URL=http://localhost:8000/api

3. 配置 Git 忽略不必要的文件：

.gitignore 中确认包含以下内容：

复制代码

node_modules
.next
.env.local

✅ 五、构建生产版本（可选）

复制代码

npm run build

✅ 六、常见扩展（按需添加）

如果你告诉我你要开发的项目类型（比如博客、管理后台、NFT 展示平台等），我可以帮你定制一份最适合的开发环境配置。

配置Next.js环境 使用vscode