当前位置: 首页 > news >正文

Next.js项目创建(chapter 1)

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

node 版本:
在这里插入图片描述

npm install -g pnpm

在这里插入图片描述

  1. 创建新的Next.js项目。我们将使用create-next-app来创建项目,并使用官方dashboard示例作为模板:
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

在这里插入图片描述

  1. 进入项目目录:
cd nextjs-dashboard
  1. 启动开发服务器:
pnpm run dev

在这里插入图片描述

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

  • 本地访问:http://localhost:3000
  • 网络访问:http://172.28.80.1:3000

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

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

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

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

相关文章:

  • AMD硬件笔试面试题型解析
  • 详解最长公共子序列问题
  • MySQL 中表的约束 -- 空属性,默认值,主键,自增长,唯一键,外键
  • 湖北理元理律师事务所债务优化方案解析:如何科学规划还款保障生活质量
  • 虚幻基础:AI
  • PDF 转 JPG 图片小工具:CodeBuddy 助力解决转换痛点
  • 算法备案审核周期
  • 【PostgreSQL】数据探查工具1.0研发可行性方案
  • 板凳-------Mysql cookbook学习 (六)
  • esp32 lvgl9.2版本,透明底色图片的,透明部分被渲染成黑色,不随背景颜色变化解决办法
  • Python实例题:人机对战初体验Python基于Pygame实现四子棋游戏
  • 量子计算:开启未来计算新纪元的革命性技术
  • 如何对两段轨迹进行拟合过渡
  • 语音搜索崛起:专业优化指南助您引领潮流
  • Leaflet根据坐标画圆形区域
  • RK3588 DRM 介绍及调试记录
  • 力扣刷题Day 53:和为 K 的子数组(560)
  • 消息队列在异步推理任务中的作用
  • 86. Java 数字和字符串 - 数字
  • java刷题(6)
  • 国外的浏览器/河池网站seo
  • 哈尔滨百度推广代理/惠州seo网站推广
  • 做的漂亮的家居网站/关键词seo公司
  • 采用模版建网站的缺点/建立个人网站
  • 唐河企业网站制作价格/深圳华强北
  • 至高建设集团 网站/网站seo快速优化