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

相关推荐
摘星编程4 分钟前
用React Native开发OpenHarmony应用:Calendar日期范围选择
javascript·react native·react.js
好好沉淀16 分钟前
Elasticsearch 中获取返回匹配记录总数
开发语言·elasticsearch
东东51624 分钟前
基于vue的电商购物网站vue +ssm
java·前端·javascript·vue.js·毕业设计·毕设
2301_7657031426 分钟前
C++与自动驾驶系统
开发语言·c++·算法
MediaTea30 分钟前
<span class=“js_title_inner“>Python:实例对象</span>
开发语言·前端·javascript·python·ecmascript
热爱编程的小刘39 分钟前
Lesson04---类与对象(下篇)
开发语言·c++·算法
毕设源码-朱学姐42 分钟前
【开题答辩全过程】以 基于Java的九价疫苗预约系统为例,包含答辩的问题和答案
java·开发语言
雨季6661 小时前
Flutter 三端应用实战:OpenHarmony “微光笔记”——在灵感消逝前,为思想点一盏灯
开发语言·javascript·flutter·ui·dart
yugi9878381 小时前
遗传算法优化的极限学习机模型(GA-ELM)Matlab实现
开发语言·matlab
编码者卢布1 小时前
【Azure Stream Analytic】用 JavaScript UDF 解决 JSON 字段被转成 Record 的关键点
javascript·json·azure