Next.js项目创建(chapter 1)

  1. 首先,确保你已经安装了Node.js和pnpm。如果还没有安装pnpm,可以使用以下命令全局安装:

node 版本:

bash 复制代码
npm install -g pnpm
  1. 创建新的Next.js项目。我们将使用create-next-app来创建项目,并使用官方dashboard示例作为模板:
bash 复制代码
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm
  1. 进入项目目录:
bash 复制代码
cd nextjs-dashboard
  1. 启动开发服务器:
bash 复制代码
pnpm run dev

现在,你的Next.js应用已经在运行了!从截图可以看到,应用运行在以下地址:

这个项目使用了Next.js 15.3.2版本,并启用了Turbopack来提升开发体验。项目结构包含了以下主要部分:

  • app/ - 包含应用的主要代码
  • public/ - 存放静态资源
  • ui/ - 包含UI组件
  • lib/ - 包含工具函数和数据处理逻辑

你可以开始编辑 app/page.tsx 文件来修改首页内容。由于启用了热重载,你的更改会立即反映在浏览器中。

参考连接:https://nextjs.org/learn/dashboard-app/getting-started

相关推荐
txinyu的博客13 分钟前
HTTP服务实现用户级窗口限流
开发语言·c++·分布式·网络协议·http
代码村新手13 分钟前
C++-类和对象(上)
开发语言·c++
全栈小精灵22 分钟前
Winform入门
开发语言·机器学习·c#
心静财富之门22 分钟前
退出 for 循环,break和continue 语句
开发语言·python
txinyu的博客24 分钟前
map和unordered_map的性能对比
开发语言·数据结构·c++·算法·哈希算法·散列表
Mr -老鬼40 分钟前
Rust适合干什么?为什么需要Rust?
开发语言·后端·rust
予枫的编程笔记43 分钟前
【Java集合】深入浅出 Java HashMap:从链表到红黑树的“进化”之路
java·开发语言·数据结构·人工智能·链表·哈希算法
ohoy1 小时前
RedisTemplate 使用之Set
java·开发语言·redis
mjhcsp1 小时前
C++ 后缀数组(SA):原理、实现与应用全解析
java·开发语言·c++·后缀数组sa
hui函数1 小时前
如何解决 pip install 编译报错 ‘cl.exe’ not found(缺少 VS C++ 工具集)问题
开发语言·c++·pip