Next.js项目创建(chapter 1)
- 首先,确保你已经安装了Node.js和pnpm。如果还没有安装pnpm,可以使用以下命令全局安装:
node 版本:
npm install -g pnpm
- 创建新的Next.js项目。我们将使用create-next-app来创建项目,并使用官方dashboard示例作为模板:
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm
- 进入项目目录:
cd nextjs-dashboard
- 启动开发服务器:
pnpm run dev
现在,你的Next.js应用已经在运行了!从截图可以看到,应用运行在以下地址:
- 本地访问:http://localhost:3000
- 网络访问:http://172.28.80.1:3000
这个项目使用了Next.js 15.3.2版本,并启用了Turbopack来提升开发体验。项目结构包含了以下主要部分:
app/
- 包含应用的主要代码public/
- 存放静态资源ui/
- 包含UI组件lib/
- 包含工具函数和数据处理逻辑
你可以开始编辑 app/page.tsx
文件来修改首页内容。由于启用了热重载,你的更改会立即反映在浏览器中。
参考连接:https://nextjs.org/learn/dashboard-app/getting-started