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

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

http://www.xdnf.cn/news/8603.html

相关文章:

  • 关于vector、queue、list哪边是front、哪边是back,增加、删除元素操作
  • 黑马Java基础笔记-15
  • C++ 实现二叉树的后序遍历与中序遍历构建及层次遍历输出
  • 吃透C++ for循环:框架+例题
  • 理解 Redis 事务-20 (MULTI、EXEC、DISCARD)
  • c/c++的opencv像素级操作二值化
  • 开发者工具箱-鸿蒙IPv6子网计算器开发笔记
  • .NET外挂系列:8. harmony 的IL编织 Transpiler
  • 如何通过EventChannel实现Flutter与原生平台的双向通信?
  • C++ 输入输出流示例代码剖析
  • 每日c/c++题 备战蓝桥杯(洛谷P1873 EKO砍树问题详解)
  • 几个MySQL系统调优工具
  • 黑马点评--基于Redis实现共享session登录
  • 《关于浔川社团退出DevPress社区及内容撤回的声明》
  • [C++面试] 基础题 11~20
  • 怎样改变中断优先级?
  • 酷柚易汛ERP仓储物流解决方案
  • CodeBuddy实现pdf批量加密
  • SQL注入基础
  • vue+threeJs 创造镂空管状
  • 配置tomcat时,无法部署工件该怎么办?
  • 深度学习损失“三位一体”——从 Fisher 的最大似然到 Shannon 的交叉熵再到 KL 散度,并走进 PET·P-Tuning微调·知识蒸馏的实战
  • Selenium自动化测试网页加载太慢如何解决?
  • 基于netty实现视频流式传输和多线程传输
  • 大模型的上下文context到底是啥
  • 环境搭建与工具配置
  • 博客打卡-八皇后问题
  • 用go从零构建写一个RPC(3)--异步调用+多路复用实现
  • 分布式事务知识点整理
  • ubuntu ollama /Dify/Docker部署大模型