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

相关推荐
多啦C梦a2 分钟前
《hash+history》你点“关于”,页面却没刷新?!——揭秘前端路由的“穿墙术”
前端·javascript·面试
水纹7 分钟前
使用pdfjs_3.2.146 预览并本地存储批注demo
前端·javascript
yvvvy9 分钟前
别再懵了!从小白到前端大厂选手的 History 路由通关指南(还顺带干翻 Hash)
javascript
hxmmm11 分钟前
hash路由和history路由
前端·javascript
前端付豪15 分钟前
24、前端性能优化体系:从指标定义到监控闭环的实战指南
前端·javascript·架构
两仪式quq23 分钟前
Java—异常Exception
java·开发语言
hardStudy_h27 分钟前
C++——模版(函数模版和类模版)
开发语言·c++
m0_6203551940 分钟前
线程学习day1---基础知识+pthread_create、self、exit、cancle、join
java·开发语言
gzzeason1 小时前
React源码4 三大核心模块之一:Schedule,scheduleUpdateOnFiber函数
开发语言·javascript·ecmascript
程高兴1 小时前
基于Matlab的四旋翼无人机动力学PID控制仿真
开发语言·matlab·无人机