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

相关推荐
夏婵语冰9 分钟前
实用R语言机器学习指南:从数据预处理到模型实战(附配套学习资源)
开发语言·学习·r语言
牛角上的男孩3 小时前
apt update Ign and 404 Not Found
开发语言·数据库
yzzzzzzzzzzzzzzzzz4 小时前
JavaScript 操作 DOM
开发语言·javascript·ecmascript
再学一点就睡4 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
海绵宝宝汉堡包5 小时前
c# 项目 文件夹
开发语言·c#
小白要加油努力5 小时前
C++设计模式--策略模式与观察者模式
开发语言·c++·设计模式
你的人类朋友6 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
小马学嵌入式~6 小时前
数据结构:队列 二叉树
c语言·开发语言·数据结构·算法
Slaughter信仰7 小时前
深入理解Java虚拟机:JVM高级特性与最佳实践(第3版)第二章知识点问答(21题)
java·开发语言·jvm
shix .7 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript