前面的话

之前就有些 React 基础，这次借着学习 Next.js 的机会把 React 的知识巩固一下，同时也尝试从 JavaScript 过渡到 TypeScript 上面，同时有了 CSS 的基础之后使用 tailwindcss 也更顺手了。

项目效果

地址

由于部署在 Vercel 上，也许要科学上网才能访问。

适配移动端以及桌面端。

知识点

Router 系统

主要页面文件都在 App 文件夹内。

其中 ui 文件夹放需要用到的组件，lib 文件夹放与服务端相关的 ts 文件。

页面则放在以页面名命名的文件夹内，约定以page.tsx作为页面文件。

可选layout.tsx作为覆盖进同层级以及子层级的页面文件。

例如@/app/dashboard/layout.tsx为侧边导航栏。

静态路由

不同页面之间可以使用<Link></Link>，不使用<a />标签跳转。例如

<Link
  href="/login"
  className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base">
  <span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
</Link>

<Link>标签内可以塞入别的标签。

在 ts 文件内还可以使用redirect('/dashboard/invoices');重定向到页面。

动态路由

当不确定路由地址的时候可以使用动态路由，例如博客地址，个人界面。

可以使用中括号[]包括路由名来创建动态路由，例如[blog],[id]。

导航的时候使用模板字符串就行了，在页面组件的地方接收一下。

// 导航
<Link href=`/dashboard/invoices/${id}/edit`></Link>

// 接收
export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;
  // ...
}

逻辑组

可以使用圆括号()来声明一个逻辑组。逻辑组的名称不会出现在 url 中，但会影响loading.tsx与layout.tsx的工作。

例如要创建dashboard的loading界面，但我们不想让这个loading界面应用到别的页面，可以创建一个逻辑组来阻止loading界面扩散。

1	/dashboard/(overview) / page.tsx / dashboard / overview / loading.tsx;

流式加载

loading 页面

上文提到了loading页面。

由于网站的时间花费主要集中在网络与存取数据库上，所以为了对用户友好，可以使用流式加载。

在还没加载好的时候提前给出一个页面，加载完成后再显示数据。

例如loading.tsx就可以在当前页面还没渲染好的时候，提前发送给用户显示。

流式传输组件

除了页面可以流式传输，组件也可以流式传输。我们先传输加载完成的组件给用户，还未加载好的组件就保持加载状态。

可以使用<Suspense>标签实现这个功能。

1
2
3

<Suspense fallback={<RevenueChartSkeleton />}>
  <RevenueChart />
</Suspense>

<RevenueChart />是加载完毕的数据。

而<Suspense>标签的 fallback 属性就是还在加载中显示的组件。

…待续

一个Next.js项目的总结 - 1