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

相关推荐
551只玄猫3 小时前
【数学建模 matlab 实验报告12】聚类分析和判别分析
开发语言·数学建模·matlab·课程设计·聚类·实验报告
小陈工5 小时前
Python Web开发入门(十七):Vue.js与Python后端集成——让前后端真正“握手言和“
开发语言·前端·javascript·数据库·vue.js·人工智能·python
H Journey5 小时前
C++之 CMake、CMakeLists.txt、Makefile
开发语言·c++·makefile·cmake
午安~婉10 小时前
Electron桌面应用聊天(续)
前端·javascript·electron
lly20240610 小时前
C 标准库 - `<stdio.h>`
开发语言
沫璃染墨10 小时前
C++ string 从入门到精通:构造、迭代器、容量接口全解析
c语言·开发语言·c++
jwn99910 小时前
Laravel6.x核心特性全解析
开发语言·php·laravel
迷藏49410 小时前
**发散创新:基于Rust实现的开源合规权限管理框架设计与实践**在现代软件架构中,**权限控制(RBAC)** 已成为保障
java·开发语言·python·rust·开源
功德+n10 小时前
Linux下安装与配置Docker完整详细步骤
linux·运维·服务器·开发语言·docker·centos
明日清晨10 小时前
python扫码登录dy
开发语言·python