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

相关推荐
Fluxart.ai25 分钟前
GPT Image 2 国内怎么用?在 Flux Art 完成图片生成与编辑
前端·javascript·gpt
承渊政道1 小时前
【Python编程—从入门到实践】(Python条件判断完全入门:从布尔表达式到列表中的if实战)
开发语言·python·pycharm·条件判断·布尔表达式
小灰灰搞电子1 小时前
Rust 相关容器(集合)详解
开发语言·容器·rust
萧瑟余晖5 小时前
Java深入解析篇三十三之密封类与接口(Sealed Classes)详解
java·开发语言
论迹复利8 小时前
FreeRTOS 在 RISC-V 上是如何“点火“的 —— 从 main() 到第一个任务的完整链路
java·开发语言·risc-v
circuitsosk9 小时前
任务规划器的三种范式对比:ReAct、Plan-and-Execute 与 Tree-of-Thought 在真实业务中的取舍
前端·javascript·python·react.js·llm·ai agent
张宇Joaquin9 小时前
鲲鹏统一并行加速库KUPL--众核并行能力介绍
java·开发语言·网络
736c9 小时前
C语言-数组 07
c语言·开发语言
宸津-代码粉碎机9 小时前
AI攻防战升级!基于Spring AI构建Java应用自动免疫安全体系
java·大数据·开发语言·人工智能·python·安全·spring
小磊哥er10 小时前
深入解构Claude Code - 第 12 篇 · 整体串起来
javascript·ai编程