跳到主要内容

Next.js

Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。由 Vercel 团队开发和维护，它提供了服务器端渲染（SSR）、静态站点生成（SSG）等功能。

创建项目​

ceate-next-app

Next.js 默认附带 TypeScript、ESLint 和 Tailwind CSS 配置。

可以选择在项目的根目录中使用 src 目录来分隔应用程序的代码和配置文件。

使用默认模板​

1、使用 npm 创建：

npx create-next-app@latest

2、使用 pnpm 创建：

npx create-next-app@latest [project-name] --use-pnpm

项目创建后，可以执行以下命令：

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}
  • dev: 运行开发服务器
  • build: 构建项目
  • start: 运行生产服务器，在本地运行构建后的项目
  • lint: 检查代码

项目启动后，会运行在 http://localhost:3000，如果想更改端口号，可以使用 -p 参数：

npx next dev -p 4000

使用官方示例​

官方示例

在创建项目时，可以使用 --example 参数来选择一个示例项目。

npx create-next-app@latest --example [example-name] [your-project-name]

比如，想在 Next.js 中使用 zustand，可以执行：

npx create-next-app@latest --example with-zustand [your-project-name]

如果想使用任何公共 GitHub 示例：

npx create-next-app@latest --example "https://github.com/.../" [your-project-name]

渲染​

Next.js 默认使用服务器组件。自动实现服务器渲染而无需额外配置，并且可以在需要时选择使用客户端组件。

服务器组件支持 Promise，可以使用 async / await。

设置元数据​

Metadata APIs

可以在 layout.tsx 或者 page.tsx 中设置元数据：

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app'
};

样式方案​

  1. Tailwind CSS
  2. CSS Modules
  3. CSS-in-JS 库

clsx可以有条件的渲染样式

字体​

字体优化

可以使用 Google Fonts 来引入字体。

例如，在 /app/ui 文件夹中，创建一个名为 fonts.ts 的新文件。将使用此文件保存在整个应用程序中使用的字体。

app/ui/fonts.ts
import { Inter, Lusitana } from 'next/font/google';

export const inter = Inter({ subsets: ['latin'] });

export const lusitana = Lusitana({
  subsets: ['latin'],
  weight: ['400', '700']
});
app/layout.tsx
import { inter } from '@/app/ui/fonts';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

图片​

图片优化

<Image>组件是 img 标签的扩展，带有自动优化图像的功能。

  • 防止在加载图像时自动切换布局
  • 调整图像大小以避免将大图像传送到具有较小视口的设备
  • 默认情况下延迟加载图像（图像在进入视口时加载）

例如，从 public 目录加载图片：

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/hero-desktop.png"
      width={1000}
      height={760}
      className="hidden md:block"
      alt="Screenshots of the dashboard project showing desktop version"
    />
  );
}

设置图像的宽度和高度以避免布局偏移，这些应该是与源图像相同的宽高比。

流式传输​

流式传输是一种数据传输技术，可将路由分解为更小的「块」，并在它们准备就绪时将它们从服务器逐步流式传输到客户端。通过流式传输，可以防止缓慢的数据请求阻塞整个页面。

有两种方式：

  1. 在页面级别，使用正在 loading.tsx 文件
  2. 对特定组件，使用 <Suspense> 组件

loading.tsx​

在有 page.tsx 的同级目录下创建 loading.tsx 文件，内容如下：

export default function Loading() {
  return <div>Loading...</div>;
}

刷新页面，就会看到页面上出现了 Loading...

加载骨架​

加载骨架是 UI 的简化版本。用作占位符，告诉用户内容正在加载。

Suspense 组件​

Suspense 组件用于在异步操作（如数据加载）完成之前，显示一个加载指示器。可展示局部页面的加载状态。

import { Suspense } from 'react';
import { CardsSkeleton } from '@/app/ui/skeletons'; // 加载骨架组件
import CardWrapper from '@/app/ui/dashboard/cards'; // 要展示的卡片组件

export default async function Page() {
  return (
    <Suspense fallback={<CardsSkeleton />}>
      <CardWrapper />
    </Suspense>
  );
}

鉴权​

NextAuth.js