# nextjs-dashboard
**Repository Path**: ilinxq/nextjs-dashboard
## Basic Information
- **Project Name**: nextjs-dashboard
- **Description**: next.js的学习
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-15
- **Last Updated**: 2025-01-31
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## Next.js App Router Course - Starter
This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application.
For more information, see the [course curriculum](https://nextjs.org/learn) on the Next.js Website.
## 说明
- nodejs镜像设置
为保证后面安装较顺利，需把nodejs设置为国内镜像（如华为）：
```shell
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
```
- 本练习来自
https://qufei1993.github.io/nextjs-learn-cn/
- npx创建指令的改进说明：
- 原始使用npm，如下：
```shell
npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"
```
- 本项目采用pnpm,修改为如下：
```shell
npx create-next-app@latest nextjs-dashboard --use-pnpm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"
```
## 运行
- 安装项目包
```shell
pnpm i
```
- 运行开发服务
```shell
pnpm dev
```
## 路由说明
### page.tsx
`page.tsx` 是 Next.js 的一个特殊文件，它导出一个 React 组件，让该路由可访问是必需的。
- `/app/page.tsx` - 与路由 `/` 相关联。
- `/app/dashbord/page.tsx` - 与 `/dashboard`相关联。
- 在 Next.js 中创建不同页面的方式：使用文件夹创建新的路由段，并在其中添加一个 `page` 文件。
- 通过为页面文件使用特殊的名称，Next.js 允许你将 UI 组件、测试文件和其他相关代码与路由放置在一起。只有页面文件内部的内容才会被公开访问。例如，`/ui` 和 `/lib` 文件夹与你的路由一起放置在 `/app` 文件夹中。
### layout
- 在 Next.js 中，可以使用一个特殊的 layout.tsx 文件来创建在多个页面之间共享的 UI。
- `` 组件接收一个 `children` 属性，这个子组件可以是一个页面或另一个布局。
- 在 Next.js 中使用布局的一个好处是，在导航时，只有页面组件会更新，而布局不会重新渲染。这被称为部分渲染。
- `/app/layout.tsx` 称为根布局
- 添加到根布局的任何 UI 将在应用程序中的所有页面之间共享。可以使用根布局来修改 `` 和 `` 标签，添加元数据。
### 导航
Link
- 在 Next.js 中，可以使用 `` 组件在应用程序的页面之间进行链接。`` 允许使用 JavaScript 进行客户端导航。
- `Link` 组件类似于使用 `` 标签，但是您使用的不是 ``，而是 ``。
为了提高导航体验，Next.js 会自动按路由段拆分应用程序。这与传统的 React SPA 不同，传统 SPA 在初始加载时会加载应用程序的所有代码。
按路由拆分代码意味着页面变得隔离。如果某个页面抛出错误，应用程序的其余部分仍将正常工作。
此外，在生产环境中，每当 `` 组件出现在浏览器的视口中时，Next.js 会自动在后台预取链接路由的代码。当用户点击链接时，目标页面的代码将在后台已经加载，这就是使页面过渡几乎瞬间完成的原因！
显示活动链接
Next.js 提供了一个名为 `usePathname()` 钩子，可以使用它来检查路径并实显示活动链接。
## [Prisma SQLite](./prisma.md)
Prisma 是一个开源的数据库工具，旨在帮助开发者更方便地在应用程序中与数据库进行交互。
参考：https://www.hsawana9.com/article/nextjs-sqlite-prisma-build-a-simple-but-stable-database-for-full-stack-web-app
参考：https://prisma.org.cn/docs/getting-started/quickstart-sqlite
## [HTML 笔记](./html.md)
## 感谢
- https://nextjs.org/learn/dashboard-app
- https://qufei1993.github.io/nextjs-learn-cn