NextJS - freeCodeCamp.org

如何在 Next.js 应用程序中使用服务器端渲染来提升 SEO

wendy chen — Fri, 07 Mar 2025 05:29:31 +0000

原文： How to Use Server-Side Rendering in Next.js Apps for Better SEO

服务端渲染（SSR）是一种可以帮助提升网站 SEO 的网页开发技术。它通过在服务器端生成 HTML 内容来响应用户的请求。

这种方法与客户端渲染（CSR）形成对比，在客户端渲染中，内容作为基本的 HTML 框架传递，JavaScript 在浏览器中获取和显示数据。

SSR 提供了显著的 SEO 优势，使其非常适合使用 Next.js 这样流行的 React 框架。让我们来讨论一下在 Next.js 中使用 SSR 如何提升网站的搜索引擎可见性。

内容目录

什么是服务端渲染
如何开始使用 Next.js 和 SSR
Next.js 如何实现服务端渲染
使用 getStaticProps 和 getServerSideProps 获取数据
SSR 为 Next.js 带来的 SEO 优势及优化方法
结论

什么是服务端渲染

服务端渲染（SSR）是一种网页开发技术，在网页服务器发送请求到用户的浏览器之前，就生成完整的 HTML 网页内容。

这与客户端渲染（CSR）不同，客户端渲染是在浏览器下载基本 HTML 结构后再使用 JavaScript 获取和显示内容。

如何开始使用 Next.js 和 SSR

开始使用 Next.js 和服务端渲染（SSR）需要几个步骤。以下是一个帮助你设置 Next.js 项目并实现 SSR 的分步骤指南。

第一步：安装 Next.js

首先，你需要安装 Next.js。你可以使用 create-next-app 来设置一个具有默认配置的新的 Next.js 项目。在终端运行如下命令：

npx create-next-app my-next-app
cd my-next-app
npm run dev

此命令会在名为 my-next-app 的文件夹中创建一个新的 Next.js 应用程序，并启动开发服务器。

第二步：了解项目结构

Next.js 通过一些默认的文件夹和文件组织项目：

pages/：该文件夹包含应用程序的所有页面。每个文件代表应用中的一个路由。
public/：可以放置图像等静态资源。
styles/：包含用于应用程序样式的 CSS 文件。

第三步：创建一个使用 SSR 的简单页面

现在，让我们创建一个使用 SSR 的简单页面。

新建文件 pages/index.js：

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    
      欢迎使用 Next.js 和 SSR
      从服务器获取的数据：{data.message}
    
  );
};

export async function getServerSideProps() {
  // 从 API 或其他来源获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // 将数据作为 props 返回给 Home 组件
  return {
    props: {
      data,
    },
  };
}

export default Home;

让我们详细讨论一下这段代码。对于 Home 组件：

Home 组件是一个接收 props 的函数式组件。
data prop 包含从服务器获取的数据。
在组件内部，我们渲染欢迎消息和获取的数据。

getServerSideProps 函数：

这个函数从 pages/index.js 文件中导出。
对于每个请求，这个函数在服务器上执行。
在此函数中可以执行异步操作，如从外部 API 获取数据。
获取的数据作为一个带有 props 属性的对象返回，该对象会作为 props 传给 Home 组件。

你可以为 getServerSideProps 函数添加错误处理，以应对数据获取过程中可能发生的问题。以下是一个例子：

export async function getServerSideProps() {
  try {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) {
      throw new Error('数据获取失败');
    }
    const data = await res.json();
    return {
      props: {
        data,
      },
    };
  } catch (error) {
    console.error(error);
    return {
      props: {
        data: { message: '数据获取时出错' },
      },
    };
  }
}

第四步：运行应用程序

如果开发服务器还未启动，请启动它：

npm run dev

打开浏览器并访问 http://localhost:3000。你应该看到页面上显示了从 API 获取的信息。

Next.js 如何实现服务端渲染

Next.js 提供了一种无缝的方式来启用 SSR 和静态站点生成（SSG）。默认情况下，它会预渲染每个页面。根据用例的不同，你可以在 SSR 和 SSG 之间进行选择：

服务端渲染（SSR）：页面在每次请求时渲染。
静态站点生成（SSG）：页面在构建时生成。

Next.js 根据你在页面组件中实现的函数（getStaticProps 和 getServerSideProps）来确定使用哪种渲染方式。

Next.js 页面组件

Next.js 使用 pages/ 目录来定义路由。在这个目录中的每一个文件都对应你应用中的一个路由。

pages/index.js → /
pages/about.js → /about
pages/posts/[id].js → /posts/:id

以下是一个页面组件的基础示例：

// pages/index.js
import React from 'react';

const Home = () => {
  return (
    
      欢迎来到 Next.js
      这是首页。
    
  );
};

export default Home;

使用 `getStaticProps` 和 `getServerSideProps` 进行数据获取

getStaticProps 用于静态生成。它在构建时运行，并允许你获取数据并将其作为 props 传递给页面。对于不经常更改的数据，使用它。

示例：

// pages/index.js
import React from 'react';

const Home = ({ posts }) => {
  return (
    
      博客文章
      
        {posts.map(post => (
          {post.title}
        ))}
      
    
  );
};

// 该函数在构建时运行
export async function getStaticProps() {
  // 从 API 获取数据
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default Home;

getServerSideProps 用于服务器端渲染。它在每个请求时运行，并允许你在请求时获取数据。

示例：

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    
      使用 Next.js 进行服务器端渲染
      从服务器获取的数据: {data.message}
    
  );
};

// 该函数在每个请求时运行
export async function getServerSideProps() {
  // 从外部 API 获取数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default Home;

使用 SSR 进行 SEO 的优势及优化方式

在本节中，我们将了解使用 SSR 进行 SEO 的主要优势，并提供易于遵循的提示，告诉你如何在 Next.js 应用中充分利用这些优势。

1. 提高搜索引擎索引

客户端渲染 (CSR) 可能导致搜索引擎难以正确索引内容，因为内容是在用户的浏览器中通过 JavaScript 渲染的。

然而，SSR 会在将内容发送到用户的浏览器之前在服务器上渲染，确保 HTML 是完整的，搜索引擎可以轻松抓取和索引。

对重要页面使用 SSR： 确保关键页面如登陆页、博客文章和产品页面在服务器上渲染，以便更好地进行索引。

示例 – 使用 SSR 进行博客文章页面：

// pages/blog/[id].js
import React from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

const BlogPost = ({ post }) => {
  const router = useRouter();
  if (router.isFallback) {
    return 加载中...;
  }

  return (
    
      
        {post.title}
        
      
      {post.title}
      {post.content}
    
  );
};

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default BlogPost

BlogPost 组件： 此组件显示一篇博文。它使用 next/head 来管理元标签，这对 SEO 很重要。
getServerSideProps 函数： 此函数从 API 获取博文数据。它在每次请求此页面时在服务器上运行，确保内容在搜索引擎抓取页面时已准备好进行索引。

2. 加快加载时间

搜索引擎如 Google 使用页面加载速度作为排名因素。SSR 可以改善首次加载时间，因为服务器会向浏览器发送一个完全渲染的页面，增强感知性能和用户体验。

优化服务器响应时间： 确保你的服务器优化以实现快速响应。使用缓存策略以减轻服务器负载。

示例 – SSR 的 cache-control 头部：

export async function getServerSideProps({ res }) {
  res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59');

  const resData = await fetch('https://api.example.com/data');
  const data = await resData.json();

  return {
    props: {
      data,
    },
  };
}

getServerSideProps 函数： 此函数设置 cache-control 头以将响应缓存 10 秒，并在重新验证的 59 秒内提供陈旧内容。这样可以提高服务器响应时间和页面加载速度，从而改善 SEO。

3. 改善社交媒体分享

在社交媒体上分享链接时，像 Facebook 和 Twitter 这样的平台会抓取 URL 内容以生成预览。SSR 确保必要的元数据在初始 HTML 中可用，从而生成更好的预览并提高点击率。

使用 next/head 管理元标签: 使用 next/head 组件为社交媒体和SEO添加元标签。

示例 – 向页面添加元标签：

import Head from 'next/head';

const Page = ({ data }) => (
  
    
      {data.title}
      
      
      
      
      
    
    {data.title}
    {data.content}
  
);

Page组件： 该组件使用next/head添加SEO元标签，包括用于社交媒体预览的Open Graph标签。这确保了当页面被分享时，社交媒体平台可以使用所提供的元数据生成丰富的预览。

4. 增强用户体验

一个更快、响应更迅速的网站能够提升整体用户体验，从而延长访问时长并降低跳出率。这两个因素都会对 SEO 排名产生积极影响。

使用静态生成（SSG）预渲染较少动态的内容页面： 对不经常变化的页面使用SSG，以减少服务器负载并提高性能。

示例 – SSG 用于静态页面：

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // 至多每10秒重新验证一次
  };
}

const StaticPage = ({ data }) => (
  
    {data.title}
    {data.content}
  
);

export default StaticPage;

StaticPage组件： 该组件显示从API获取的静态内容。
getStaticProps函数： 此函数在构建时获取数据，并每十秒重新验证一次，确保内容始终新鲜，同时减少服务器负担。

结论

结合使用服务端渲染和Next.js就像为您的网站在搜索引擎中提供了额外的推动力。利用预构建的内容以及流畅的用户体验，您的网站可以更自然地被更多人看到。

这对任何类型的网站都非常有效，从在线商店到博客。使用Next.js与SSR能够轻松构建一个搜索引擎友好且用户喜欢的网站。

这就是本篇文章的全部内容！如果您想继续交流或者有问题、建议或反馈，欢迎随时联系我的LinkedIn。如果您喜欢这篇内容，可以考虑请我喝杯咖啡，以支持更多面向开发人员的内容创作。

如何为 Nestjs 编写单元测试和 E2E 测试

woai3c — Fri, 12 Jul 2024 02:50:00 +0000

前言

最近在给一个 nestjs 项目写单元测试（Unit Testing）和 e2e 测试（End-to-End Testing，端到端测试，简称 e2e 测试），这是我第一次给后端项目写测试，发现和之前给前端项目写测试还不太一样，导致在一开始写测试时感觉无从下手。后来在看了一些示例之后才想明白怎么写测试，所以打算写篇文章记录并分享一下，以帮助和我有相同困惑的人。

同时我也写了一个 demo 项目，相关的单元测试、e2e 测试都写好了，有兴趣可以看一下。代码已上传到 GitHub: nestjs-demo。

单元测试和 E2E 测试的区别

单元测试和 e2e 测试都是软件测试的方法，但它们的目标和范围有所不同。

单元测试是对软件中的最小可测试单元进行检查和验证。比如一个函数、一个方法都可以是一个单元。在单元测试中，你会对这个函数的各种输入给出预期的输出，并验证功能的正确性。单元测试的目标是快速发现函数内部的 bug，并且它们容易编写、快速执行。

而 e2e 测试通常通过模拟真实用户场景的方法来测试整个应用，例如前端通常使用浏览器或无头浏览器来进行测试，后端则是通过模拟对 API 的调用来进行测试。

在 nestjs 项目中，单元测试可能会测试某个服务（service）、某个控制器（controller）的一个方法，例如测试 Users 模块中的 update 方法是否能正确的更新一个用户。而一个 e2e 测试可能会测试一个完整的用户流程，如创建一个新用户，然后更新他们的密码，然后删除该用户。这涉及了多个服务和控制器。

编写单元测试

为一个工具函数或者不涉及接口的方法编写单元测试，是非常简单的，你只需要考虑各种输入并编写相应的测试代码就可以了。但是一旦涉及到接口，那情况就复杂了。用代码来举例：

async validateUser(
  username: string,
  password: string,
): Promise {
  const entity = await this.usersService.findOne({ username });
  if (!entity) {
    throw new UnauthorizedException('User not found');
  }

  if (entity.lockUntil && entity.lockUntil > Date.now()) {
    const diffInSeconds = Math.round((entity.lockUntil - Date.now()) / 1000);
    let message = `The account is locked. Please try again in ${diffInSeconds} seconds.`;
    if (diffInSeconds > 60) {
      const diffInMinutes = Math.round(diffInSeconds / 60);
      message = `The account is locked. Please try again in ${diffInMinutes} minutes.`;
    }

    throw new UnauthorizedException(message);
  }

  const passwordMatch = bcrypt.compareSync(password, entity.password);
  if (!passwordMatch) {
    // $inc update to increase failedLoginAttempts
    const update = {
      $inc: { failedLoginAttempts: 1 },
    };

    // lock account when the third try is failed
    if (entity.failedLoginAttempts + 1 >= 3) {
      // $set update to lock the account for 5 minutes
      update['$set'] = { lockUntil: Date.now() + 5 * 60 * 1000 };
    }

    await this.usersService.update(entity._id, update);
    throw new UnauthorizedException('Invalid password');
  }

  // if validation is sucessful, then reset failedLoginAttempts and lockUntil
  if (
    entity.failedLoginAttempts > 0 ||
    (entity.lockUntil && entity.lockUntil > Date.now())
  ) {
    await this.usersService.update(entity._id, {
      $set: { failedLoginAttempts: 0, lockUntil: null },
    });
  }

  return { userId: entity._id, username } as UserAccountDto;
}

上面的代码是 auth.service.ts 文件里的一个方法 validateUser，主要用于验证登录时用户输入的账号密码是否正确。它包含的逻辑如下：

根据 username 查看用户是否存在，如果不存在则抛出 401 异常（也可以是 404 异常）
查看用户是否被锁定，如果被锁定则抛出 401 异常和相关的提示文字
将 password 加密后和数据库中的密码进行对比，如果错误则抛出 401 异常（连续三次登录失败会被锁定账户 5 分钟）
如果登录成功，则将之前登录失败的计数记录进行清空（如果有）并返回用户 id 和 username 到下一阶段

可以看到 validateUser 方法包含了 4 个处理逻辑，我们需要对这 4 点都编写对应的单元测试代码，以确定整个 validateUser 方法功能是正常的。

第一个测试用例

在开始编写单元测试时，我们会遇到一个问题，findOne 方法需要和数据库进行交互，它要通过 username 查找数据库中是否存在对应的用户。但如果每一个单元测试都得和数据库进行交互，那测试起来会非常麻烦。所以可以通过 mock 假数据来实现这一点。

举例，假如我们已经注册了一个 woai3c 的用户，那么当用户登录时，在 validateUser 方法中能够通过 const entity = await this.usersService.findOne({ username }); 拿到用户数据。所以只要确保这行代码能够返回想要的数据，即使不和数据库交互也是没有问题的。而这一点，我们能通过 mock 数据来实现。现在来看一下 validateUser 方法的相关测试代码：

import { Test } from '@nestjs/testing';
import { AuthService } from '@/modules/auth/auth.service';
import { UsersService } from '@/modules/users/users.service';
import { UnauthorizedException } from '@nestjs/common';
import { TEST_USER_NAME, TEST_USER_PASSWORD } from '@tests/constants';

describe('AuthService', () => {
  let authService: AuthService; // Use the actual AuthService type
  let usersService: Partial>;

  beforeEach(async () => {
    usersService = {
      findOne: jest.fn(),
    };

    const module = await Test.createTestingModule({
      providers: [
        AuthService,
        {
          provide: UsersService,
          useValue: usersService,
        },
      ],
    }).compile();

    authService = module.get(AuthService);
  });

  describe('validateUser', () => {
    it('should throw an UnauthorizedException if user is not found', async () => {
      await expect(
        authService.validateUser(TEST_USER_NAME, TEST_USER_PASSWORD),
      ).rejects.toThrow(UnauthorizedException);
    });

    // other tests...
  });
});

我们通过调用 usersService 的 fineOne 方法来拿到用户数据，所以需要在测试代码中 mock usersService 的 fineOne 方法：

 beforeEach(async () => {
    usersService = {
      findOne: jest.fn(), // 在这里 mock findOne 方法
    };

    const module = await Test.createTestingModule({
      providers: [
        AuthService, // 真实的 AuthService，因为我们要对它的方法进行测试
        {
          provide: UsersService, // 用 mock 的 usersService 代替真实的 usersService 
          useValue: usersService,
        },
      ],
    }).compile();

    authService = module.get(AuthService);
  });

通过使用 jest.fn() 返回一个函数来代替真实的 usersService.findOne()。如果这时调用 usersService.findOne() 将不会有任何返回值，所以第一个单元测试用例就能通过了：

it('should throw an UnauthorizedException if user is not found', async () => {
  await expect(
    authService.validateUser(TEST_USER_NAME, TEST_USER_PASSWORD),
  ).rejects.toThrow(UnauthorizedException);
});

因为在 validateUser 方法中调用 const entity = await this.usersService.findOne({ username }); 的 findOne 是 mock 的假函数，没有返回值，所以 validateUser 方法中的第 2-4 行代码就能执行到了：

if (!entity) {
  throw new UnauthorizedException('User not found');
}

抛出 401 错误，符合预期。

第二个测试用例

validateUser 方法中的第二个处理逻辑是判断用户是否锁定，对应的代码如下：

if (entity.lockUntil && entity.lockUntil > Date.now()) {
  const diffInSeconds = Math.round((entity.lockUntil - Date.now()) / 1000);
  let message = `The account is locked. Please try again in ${diffInSeconds} seconds.`;
  if (diffInSeconds > 60) {
    const diffInMinutes = Math.round(diffInSeconds / 60);
    message = `The account is locked. Please try again in ${diffInMinutes} minutes.`;
  }

  throw new UnauthorizedException(message);
}

可以看到如果用户数据里有锁定时间 lockUntil 并且锁定结束时间大于当前时间就可以判断当前账户处于锁定状态。所以需要 mock 一个具有 lockUntil 字段的用户数据：

it('should throw an UnauthorizedException if the account is locked', async () => {
  const lockedUser = {
    _id: TEST_USER_ID,
    username: TEST_USER_NAME,
    password: TEST_USER_PASSWORD,
    lockUntil: Date.now() + 1000 * 60 * 5, // The account is locked for 5 minutes
  };

  usersService.findOne.mockResolvedValueOnce(lockedUser);

  await expect(
    authService.validateUser(TEST_USER_NAME, TEST_USER_PASSWORD),
  ).rejects.toThrow(UnauthorizedException);
});

在上面的测试代码里，先定义了一个对象 lockedUser，这个对象里有我们想要的 lockUntil 字段，然后将它作为 findOne 的返回值，这通过 usersService.findOne.mockResolvedValueOnce(lockedUser); 实现。然后 validateUser 方法执行时，里面的用户数据就是 mock 出来的数据了，从而成功让第二个测试用例通过。

单元测试覆盖率

剩下的两个测试用例就不写了，原理都是一样的。如果剩下的两个测试不写，那么这个 validateUser 方法的单元测试覆盖率会是 50%，如果 4 个测试用例都写完了，那么 validateUser 方法的单元测试覆盖率将达到 100%。

单元测试覆盖率（Code Coverage）是一个度量，用于描述应用程序代码有多少被单元测试覆盖或测试过。它通常表示为百分比，表示在所有可能的代码路径中，有多少被测试用例覆盖。

单元测试覆盖率通常包括以下几种类型：

行覆盖率（Lines）：测试覆盖了多少代码行。
函数覆盖率（Funcs）：测试覆盖了多少函数或方法。
分支覆盖率（Branch）：测试覆盖了多少代码分支（例如，if/else 语句）。
语句覆盖率（Stmts）：测试覆盖了多少代码语句。

单元测试覆盖率是衡量单元测试质量的一个重要指标，但并不是唯一的指标。高的覆盖率可以帮助检测代码中的错误，但并不能保证代码的质量。覆盖率低可能意味着有未被测试的代码，可能存在未被发现的错误。

下图是 demo 项目的单元测试覆盖率结果：

像 service 和 controller 之类的文件，单元测试覆盖率一般尽量高点比较好，而像 module 这种文件就没有必要写单元测试了，也没法写，没有意义。上面的图片表示的是整个单元测试覆盖率的总体指标，如果你想查看某个函数的测试覆盖率，可以打开项目根目录下的 coverage/lcov-report/index.html 文件进行查看。例如我想查看 validateUser 方法具体的测试情况：

可以看到原来 validateUser 方法的单元测试覆盖率并不是 100%，还是有两行代码没有执行到，不过也无所谓了，不影响 4 个关键的处理节点，不要片面的追求高测试覆盖率。

编写E2E 测试

在单元测试中我们展示了如何为 validateUser() 的每一个功能点编写单元测试，并且使用了 mock 数据的方法来确保每个功能点都能够被测试到。而在 e2e 测试中，我们需要模拟真实的用户场景，所以要连接数据库来进行测试。因此，这次测试的 auth.service.ts 模块里的方法都会和数据库进行交互。

auth 模块主要有以下几个功能：

注册
登录
刷新 token
读取用户信息
修改密码
删除用户

e2e 测试需要将这六个功能都测试一遍，从注册开始，到删除用户结束。在测试时，我们可以建一个专门的测试用户来进行测试，测试完成后再删除这个测试用户，这样就不会在测试数据库中留下无用的信息了。

beforeAll(async () => {
  const moduleFixture: TestingModule = await Test.createTestingModule({
    imports: [AppModule],
  }).compile()

  app = moduleFixture.createNestApplication()
  await app.init()

  // 执行登录以获取令牌
  const response = await request(app.getHttpServer())
    .post('/auth/register')
    .send({ username: TEST_USER_NAME, password: TEST_USER_PASSWORD })
    .expect(201)

  accessToken = response.body.access_token
  refreshToken = response.body.refresh_token
})

afterAll(async () => {
  await request(app.getHttpServer())
    .delete('/auth/delete-user')
    .set('Authorization', `Bearer ${accessToken}`)
    .expect(200)

  await app.close()
})

beforeAll 钩子函数将在所有测试开始之前执行，所以我们可以在这里注册一个测试账号 TEST_USER_NAME。afterAll 钩子函数将在所有测试结束之后执行，所以在这删除测试账号 TEST_USER_NAME 是比较合适的，还能顺便对注册和删除两个功能进行测试。

在上一节的单元测试中，我们编写了关于 validateUser 方法的相关单元测试。其实这个方法是在登录时执行的，用于验证用户账号密码是否正确。所以这一次的 e2e 测试也将使用登录流程来展示如何编写 e2e 测试用例。

整个登录测试流程总共包含了五个小测试：

describe('login', () => {
    it('/auth/login (POST)', () => {
      // ...
    })

    it('/auth/login (POST) with user not found', () => {
      // ...
    })

    it('/auth/login (POST) without username or password', async () => {
      // ...
    })

    it('/auth/login (POST) with invalid password', () => {
      // ...
    })

    it('/auth/login (POST) account lock after multiple failed attempts', async () => {
      // ...
    })
  })

这五个测试分别是：

登录成功，返回 200
如果用户不存在，抛出 401 异常
如果不提供密码或用户名，抛出 400 异常
使用错误密码登录，抛出 401 异常
如果账户被锁定，抛出 401 异常

现在我们开始编写 e2e 测试：

// 登录成功
it('/auth/login (POST)', () => {
  return request(app.getHttpServer())
    .post('/auth/login')
    .send({ username: TEST_USER_NAME, password: TEST_USER_PASSWORD })
    .expect(200)
})

// 如果用户不存在，应该抛出 401 异常
it('/auth/login (POST) with user not found', () => {
  return request(app.getHttpServer())
    .post('/auth/login')
    .send({ username: TEST_USER_NAME2, password: TEST_USER_PASSWORD })
    .expect(401) // Expect an unauthorized error
})

e2e 的测试代码写起来比较简单，直接调用接口，然后验证结果就可以了。比如登录成功测试，我们只要验证返回结果是否是 200 即可。

前面四个测试都比较简单，现在我们看一个稍微复杂点的 e2e 测试，即验证账户是否被锁定。

it('/auth/login (POST) account lock after multiple failed attempts', async () => {
  const moduleFixture: TestingModule = await Test.createTestingModule({
    imports: [AppModule],
  }).compile()

  const app = moduleFixture.createNestApplication()
  await app.init()

  const registerResponse = await request(app.getHttpServer())
    .post('/auth/register')
    .send({ username: TEST_USER_NAME2, password: TEST_USER_PASSWORD })

  const accessToken = registerResponse.body.access_token
  const maxLoginAttempts = 3 // lock user when the third try is failed

  for (let i = 0; i < maxLoginAttempts; i++) {
    await request(app.getHttpServer())
      .post('/auth/login')
      .send({ username: TEST_USER_NAME2, password: 'InvalidPassword' })
  }

  // The account is locked after the third failed login attempt
  await request(app.getHttpServer())
    .post('/auth/login')
    .send({ username: TEST_USER_NAME2, password: TEST_USER_PASSWORD })
    .then((res) => {
      expect(res.body.message).toContain(
        'The account is locked. Please try again in 5 minutes.',
      )
    })

  await request(app.getHttpServer())
    .delete('/auth/delete-user')
    .set('Authorization', `Bearer ${accessToken}`)

  await app.close()
})

当用户连续三次登录失败的时候，账户就会被锁定。所以在这个测试里，我们不能使用测试账号 TEST_USER_NAME，因为测试成功的话这个账户就会被锁定，无法继续进行下面的测试了。我们需要再注册一个新用户 TEST_USER_NAME2，专门用来测试账户锁定，测试成功后再删除这个用户。所以你可以看到这个 e2e 测试的代码非常多，需要做大量的前置、后置工作，其实真正的测试代码就这几行：

// 连续三次登录
for (let i = 0; i < maxLoginAttempts; i++) {
  await request(app.getHttpServer())
    .post('/auth/login')
    .send({ username: TEST_USER_NAME2, password: 'InvalidPassword' })
}

// 测试账号是否被锁定
await request(app.getHttpServer())
  .post('/auth/login')
  .send({ username: TEST_USER_NAME2, password: TEST_USER_PASSWORD })
  .then((res) => {
    expect(res.body.message).toContain(
      'The account is locked. Please try again in 5 minutes.',
    )
  })

可以看到编写 e2e 测试代码还是相对比较简单的，不需要考虑 mock 数据，不需要考虑测试覆盖率，只要整个系统流程的运转情况符合预期就可以了。

应不应该写测试

如果有条件的话，我是比较建议大家写测试的。因为写测试可以提高系统的健壮性、可维护性和开发效率。

提高系统健壮性

我们一般编写代码时，会关注于正常输入下的程序流程，确保核心功能正常运作。但是一些边缘情况，比如异常的输入，这些我们可能会经常忽略掉。但当我们开始编写测试时，情况就不一样了，这会逼迫你去考虑如何处理并提供相应的反馈，从而避免程序崩溃。可以说写测试实际上是在间接地提高系统健壮性。

提高可维护性

当你接手一个新项目时，如果项目包含完善的测试，那将会是一件很幸福的事情。它们就像是项目的指南，帮你快速把握各个功能点。只看测试代码就能够轻松地了解每个功能的预期行为和边界条件，而不用你逐行的去查看每个功能的代码。

提高开发效率

想象一下，一个长时间未更新的项目突然接到了新需求。改了代码后，你可能会担心引入 bug，如果没有测试，那就需要重新手动测试整个项目——浪费时间，效率低下。而有了完整的测试，一条命令就能得知代码更改有没有影响现有功能。即使出错了，也能够快速定位，找到问题点。

什么时候不建议写测试？

短期项目、需求迭代非常快的项目不建议写测试。比如某些活动项目，活动结束就没用了，这种项目就不需要写测试。另外，需求迭代非常快的项目也不要写测试，我刚才说写测试能提高开发效率是有前提条件的，就是功能迭代比较慢的情况下，写测试才能提高开发效率。如果你的功能今天刚写完，隔一两天就需求变更了要改功能，那相关的测试代码都得重写。所以干脆就别写了，靠团队里的测试人员测试就行了，因为写测试是非常耗时间的，没必要自讨苦吃。

根据我的经验来看，国内的绝大多数项目（尤其是政企类项目）都是没有必要写测试的，因为需求迭代太快，还老是推翻之前的需求，代码都得加班写，那有闲情逸致写测试。

总结

在细致地讲解了如何为 Nestjs 项目编写单元测试及 e2e 测试之后，我还是想重申一下测试的重要性，它能够提高系统的健壮性、可维护性和开发效率。如果没有机会写测试，我建议大家可以自己搞个练习项目来写，或者说参加一些开源项目，给这些项目贡献代码，因为开源项目对于代码要求一般都比较严格。贡献代码可能需要编写新的测试用例或修改现有的测试用例。

最后，再推荐一下我的其他文章，如果你有兴趣，不妨一读：

参考资料

NestJS: A framework for building efficient, scalable Node.js server-side applications.
MongoDB: A NoSQL database used for data storage.
Jest: A testing framework for JavaScript and TypeScript.
Supertest: A library for testing HTTP servers.

Next.js SEO——如何使用 Next 构建高性能应用程序

luojiyin — Thu, 13 Jul 2023 03:50:24 +0000

原文： Next.js SEO for Developers – How to Build Highly Performant Apps with Next

Next.js 是一个流行的基于 React 的 Web 框架，近年来获得了流行和不断增长的社区。它是一个强大的工具，用于构建快速的和对 SEO 友好的 Web 应用，其动态页面在移动设备上运行良好。

由于同构系统设计的复杂性质，Next.js 的 SEO 可能是一个棘手的话题，让你头疼。特别是如果你在传统的 React 应用程序应用它，而且你只依赖文档。

凭借其对服务器端渲染、静态网站生成以及现在的 React 服务器组件的内置支持，Next.js 提供了一个强大的平台，可以在你的 Web 应用中实现高质量的 SEO 指标。它还可以帮助你在 Node 和 React 应用程序中的多个页面上提供卓越的用户体验，同时使它们对 SEO 友好。

为什么要学习 NextJS 用于前端开发？

简而言之，最新版本的 NextJS 是一个开源平台，解决了 React 目前存在的很多渲染问题。我写这篇文章是因为很多前端开发者对我很生气:-D。

他们花了 6-9 个月开发一个 React App，然后我不得不要求他们重构代码。

Next.js 避免了很多渲染问题。它让搜索引擎非常容易理解你的网站是怎么回事。

谁会从这篇文章中得到最大的收获？

如果你是一个营销人员或遇到 SEO 问题的资深开发人员，这将对你很有帮助。

然而，也欢迎新手开发者查看这些信息，因为它将对你有长期的帮助。

你应该如何渲染你的下一个 JS 网页应用程序？

我个人从我的咨询公司OhMyCrawl查看了大量的这些网站，并制作了一个视频概述，以帮助了解使用 Next.js 等框架对 SEO 的好处。

Next SEO 与其他框架有什么不同？

Next SEO 通过将如此多的功能和免费工具精简到一个组织良好的软件包中，使你可以轻松地处理和应用于你的单页应用，这是它的优势。当涉及到搜索引擎优化、图像优化和最小化累积布局转移等任务时，Next 做得很好。

Next.js SEO 的好处还不止于此。我们将介绍 Next.js 带来的许多与搜索引擎有关的好东西。

搜索引擎、SSR 和 SSG 的概念在不断发展

大多数开发者和 SEO 专家已经对现有的页面创建策略和整个 SSR 与 SSG 范式感到相当满意。他们也对 Next.js 的第 12 版产生了高度的信任，该版本提供了一个清晰的方式来处理这两种形式的页面生成。

不过，像往常一样，另一个 Web 应用模式的转变正在进行中，这次是以 React 服务器组件（RSCs）的形式出现的，Next.js 第 13 版中默认包含了这些组件。

SEO 的概念没有改变--只是方法改变了

Nextjs SEO 在概念上不会有太大变化。如果你想获得良好的搜索引擎结果和流量增长，关键仍然是快速载入页面、快速渲染、低累积布局变动等等。静态页面仍然扮演着重要角色。

但是，Next.js 提供了一些非常棒而独特的功能，可以帮助我们实现出色的搜索引擎指标，它不仅仅是 React Server Components。

我们将探讨一些最佳实践，以及使用 Next.js 实现出色的 SEO 优化指标的不同技术和策略。我们还将看到如何利用它独特的功能来提高网站的搜索引擎可见性（网页里优先显示）和用户参与度。

Next.js 13 有哪些与 SEO 相关的新内容？

我们不会给你一个关于第 13 版技术变化的全面指南，而是主要关注 Next JS 的 SEO 相关优势。我们还将探讨如何利用最佳的 SEO 实践，在搜索引擎中取得尽可能好的结果，而且能帮你节省不少精力。

我们将在这里讨论的 Nextjs 13 变化如下：

React 服务器组件
流式 UI（Streaming UI chunks）
升级的 Next 图片组件
Next 字体组件

除了 Next.js 默认的 SEO 属性外，这些特定的升级是 Next.js 版本 13 中 SEO 改进的基石。每个升级都有其自身的优点，我们将很快逐个介绍。

React 服务器组件

RSCs 允许在客户端和服务器上采用更精细的渲染方式。

React 允许开发者选择组件是在服务器上还是在客户端渲染，而不是在用户请求时被迫决定在客户端还是服务器上渲染整个页面。这可以让你在搜索引擎结果页面中获得巨大优势。

如今，绝大多数的页面优化都是围绕着减少向客户端发送 JavaScript。毕竟，这是使用预渲染和服务器端渲染来创建网页和 HTML 页面的主要好处。

RSC 是帮助实现这一目的的另一个工具，并从你的网页或单页应用程序中获得尽可能多的 SEO 价值。这有助于通过刷新 React 组件中的动态数据，同时保持页面内容的静态部分不变，从而实现更好的 SEO。

流式 UI

Next.js SEO 在添加 RSC（React Server Components）的同时，迈出了一大步，而流式 UI（Streaming UI）代码块则是锦上添花。流式 UI 是一个类似的新兴设计模式，称为岛屿架构（the island architecture），旨在在首次加载时尽量向客户端发送最少的代码。

允许细粒度的控制非常好，但为什么不向客户端发送一个无需 JavaScript 的完全渲染的页面，然后再发送剩余的内容呢？这正是流式 UI 代码块所实现的目标。

当 Next.js 在服务器端渲染页面时，通常会将页面的所有 JavaScript 捆绑并与之一起发送。而流式 UI 代码块的引入消除了这种需要，允许向客户端发送一个非常小的静态页面，显著改善了诸如首次内容呈现时间和整体页面速度等指标。

Next.js 13 App 目录

当你启动一个新的 Next.js 13 项目时，你会注意到一个名为*app的新目录。在 app 目录下的所有东西都是预先配置好的，以允许 RSCs 和流式 UI 的出现。你只需要创建一个loading.js组件，它将完全包住页面组件和 suspense 边界内的任何子节点。

你可以通过自己手动创建 suspense 边界来实现更精细的加载模式，基本上可以无限地控制初始请求时加载的内容。

流式 UI 的步骤大致如下：

用户发起初始请求
渲染并发送基本的 HTML 页面给客户端
服务器准备 JavaScript 捆绑文件
在客户端浏览器中显示需要 JavaScript 的页面部分
仅将该组件所需的 JavaScript 捆绑文件发送给客户端

这种新的工具对于技术性 SEO 具有重要影响，它使得更具交互性的页面能够与静态页面竞争，提高页面载入速度和其他在搜索引擎中用作排名因素的指标。

升级的 Next Image 组件

Next.js SEO 领域的另一个重要升级是图片组件（Image component）。虽然它被低估了，但在我看来，最大的改进是利用了原生的懒加载。

浏览器对本地懒加载的支持已经有一段时间了，为这个功能添加额外的 JavaScript 只是浪费带宽而已。

其他一些对 SEO 有很大帮助的改进是：

默认需要 alt 标签。
更好的验证，以确定涉及无效属性的错误。
由于有了一个更像 HTML 的界面，更容易进行样式设计。

总的来说，新的图片组件被简化和精简了，而在编程领域，简单的东西几乎总是更好。

Next Font 组件

字体组件（font component）对 Next.js 的 SEO 来说是一个巨大的胜利，它肯定会帮助减轻未来的许多头痛问题。任何有经验的开发者都知道，正确配置字体是多么繁琐的事情（在这种情况下，正确不是相对的！）。

由于加载缓慢而导致的累积布局转移是一个常见的困扰，像谷歌这样的搜索引擎已经公开表示，CLS 是一个重要的指标。（CLS 是 Cumulative Layout Shift 的缩写，衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。）

根据你所使用的框架（我想到的是 Gatsby），让你的字体有效地预加载可能是很棘手的。一段时间以来，向谷歌等字体库发出外部请求是一个避免不了的丑陋行为，在许多 SPA 应用程序中造成了一个难以管理的瓶颈。

Next Font Component 旨在解决这个问题，它在构建时获取所有的外部字体，并从你自己的域中自我托管它们。字体也被自动优化，并且通过自动利用 CSS size-adjust（大小调整） 属性实现了零累积的布局转移。

用 Next.js 完成与 SEO 相关的常见任务

为 Next.js 13 配置常见 SEO 任务时，有几个重要的议题需要考虑。

Next.js 13 的 SEO

Nextjs 的 React Head 组件通常被用来给文档头部的（Head）元标签赋值，也可以用来注入结构化数据。

然而，Nextjs13 中，Head 组件就不复存在了。起初，Next 选择利用一个名为 head.js 的特殊文件，其工作方式与 Head 组件类似。在 13.2 版本之后，Next 实现了Metadata组件，这是一个更专有的实现，通过轻松填充元标签来解决元数据问题。

让我们仔细看看这两个常见的 SEO 任务，并检查它们过去是如何处理的，而不是新的 13 版的方式。

如何为搜索引擎优化配置头部标签（head tag）

在 13 版之前，我们会导入 Next/Head 组件，并在网页的 HTML 文件中设置任何必要的元数据值，如标题和描述或其他元标签。

12 版中 Head 组件的一个简单例子是这样的：

import Head from 'next/head';
const structData = {
  '@context': 'https://schema.org',
  '@type': 'BlogPosting',
  headline: 'Learning Next.js SEO',
  description: 'All about Next.js features and more',
  author: [
    {
      '@type': 'Person',
      name: 'Jane Doe'
    }
  ],
  datePublished: '2023-02-16T09:00:00.000Z'
};
function IndexPage() {
  return (
    
      
        
        My page title
        
      {/* ... */}
    
  );
}

正如你所看到的，这是超级简单的，真的没有必要通过尝试将结构化数据注入头部标签（head tag）来使事情复杂化。

Next.js SEO – 结束语

我们在这里对 Nextjs SEO 进行了相当多的讨论。从 Next 13 中包含的旨在解决许多 SEO 相关问题的新功能，到为获得更好的开发者体验而对旧功能进行改造和精简，Next 的情况看起来很好。

如果你打算使用 Next.js 作为你的首选框架，我强烈建议你尝试使用 Next 13。尽管诸如字体组件等功能仍处于测试阶段，而且整个系统仍处于金丝雀（测试阶段），但第 13 版的大部分内容已被认为是稳定的，并被许多开发者和世界领先的公司所使用。

主要的版本更新可能是令人生畏的，但请阅读完整的文档，并尝试使用它，以确保你跟上 Next.js SEO 的最新进展。

用 Ghost API 和 Next.js 创建一个博客网站

luojiyin — Wed, 05 Jul 2023 05:55:00 +0000

原文： How to Build a Blog with the Ghost API and Next.js

Ghost CMS 是一个流行的内容管理系统，许多开发者和公司用它来托管他们的博客。

它有许多功能和一个高度优化的编辑器，适合写作。你甚至可以使用 handlebars.js 构建不同的主题。

但如果你不了解 Handlebars，学习它可能是一个漫长而困难的过程。如果你已经是一个 Next.js 的开发者，而你不知道 Handlebars，为你基于 Ghost 的网站创建一个新的主题可能会很艰难。

在这篇文章中，我将教你如何使用 Ghost CMS 作为后端和 Next.js 作为前端。我将指导你完成与 Nextjs 13 应用目录和 Ghost CMS API 有关的一切。

Next.js 13 团队目前正在开发实验性的 app 文件夹。Next 使用基于文件的路由与page目录。新的 app 目录基于文件系统路由，并提供额外的功能，如布局、错误处理、组件加载、服务器端和客户端渲染等。

所有的代码都可以在 GitHub 上找到。你也可以查看网上的演示网站。

为什么在前端使用 Next.js 而不是 Ghost CMS 主题
做项目前需要做好的准备
如何设置 Ghost CMS
如何利用云计算建立 Ghost CMS
如何获得博客模板
如何设置 Next.js
在学习本教程之前，需要知道什么
文件夹结构
如何配置 Ghost CMS 和 Next.js
了解 Next.js 13 app 文件夹
项目的演示数据
如何建立博客
如何建立页眉（header）
如何建立页脚（Footer）
如何建立 layout
如何建立主页（homepage）
如何建立阅读页（reading page）
如何建立标签页（tag page）
如何建立作者页（author page）
如何建立单页（single pages）
如何处理分页（pagination）
Next.js SEO
如何开启搜索
错误处理
如何用 webhooks 重新构建你的静态网站
总结

在这篇文章中，我们将介绍 Next 的带有实验性的 app 文件目录的基本情况。然后，我将教你如何在本地加强 Next 和 Ghost CMS，以及如何将 Ghost 与 Next 整合。最后，我会告诉你如何从后端（通过 Ghost CMS 的 API）获取数据，并用 React.js 在网站上显示。

为什么在前端使用 Next.js 而不是 Ghost CMS 主题

有几个原因可以让你考虑使用 Next 作为你的博客的前端框架：

Ghost CMS 不生成静态构建，但 Next.js 可以。
使用 Next.js，你可以获得更高的网站速度和性能，而且它现在提供了内置的 SEO 支持和其他优化功能。Ghost 不具备其中的一些功能。
对于 React 开发者来说，用 Next 构建一个新的博客很容易（因为 Next 是基于 React 的），你不需要学习额外的工具。
你会发现有一些服务提供商可以为 Ghost 提供服务，一键部署 Ghost 博客。他们中的大多数都有一个付费计划，而有一两个提供免费计划（但这些往往有时间和功能限制）。对于 Next.js，市场上有许多供应商。

通常来说，当涉及到静态构建和网站性能时，Ghost 在这两种情况下的表现都不尽如人意。另一个选择是使用一个前端平台，如 Next、React、Angular 或 Vue。

我选择 Next 是因为它是一个需求量很大、很受欢迎的 React 框架，而且大量的工具和库都是围绕它建立的。

请注意，目前的项目还没有为 TypeScript 做好准备，但我正在努力。因为这个原因我在构建时禁用了 TypeScript，像这样：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true
  },

  typescript: {
    ignoreBuildErrors: false
  }
};

module.exports = nextConfig;

在开发过程中忽略构建错误

做项目前需要做好的准备

要跟上这个教程，你需要具备以下软件包的基本知识：

PNPM是一个类似于 npm 或 yarn 的 Node.js 包管理器（你也可以使用你喜欢的任何一个）。
TypeScript帮助你在 JavaScript 中编写类型安全的代码，也可以帮助提高生产力。不过，这不是必须的。你可以在你的项目中使用 JavaScript。
React.js是一个免费和开源的前端 JavaScript 库，用于用类和函数组件构建用户界面。
Next.js 13 (app)是基于 React 的，它提供了额外的功能，如路由、错误处理和布局。
Ghost CMS API是一个开源的内容管理系统（CMS），类似于 WordPress。Ghost 是专门为博客设计和建造的。在这个项目中，我们将 Ghost 作为后端，Next 作为前端。对于后端和前端开发之间的通信，我们将使用 Ghost CMS API。
Tailwind CSS是一个开源的 CSS 的框架，类似于 Bootstrap。我们将使用 Tailwind CSS 来设计我们的博客网站。

如何设置 Ghost CMS

下一步是在本地安装 Ghost，你可以用一条命令完成。首先，你需要用 pnpm、yarn 或 npm 全局安装ghost-cli。

pnpm add -g ghost-cli@latest

# or

yarn global add ghost-cli@latest

# or

npm install ghost-cli@latest -g

global

安装 Ghost CLI 后，你可以用以下命令在本地创建一个新的 Ghost 博客项目：

ghost install local

博客安装完成后，你可以用 ghost start 命令启动你的本地开发服务器，你的本地开发服务可以通过http://localhost:2368/ghost 访问。

其他 Ghost CLI 命令

在使用 Ghost CLI 时，有几个命令是有帮助的：

ghost start：启动你的服务
ghost stop：停止运行你的 Ghost 服务
ghost help：查看可用的命令列表

注意：

在安装之前，请确保你当前的安装目录是空的。目前，你是在开发模式下安装 Ghost。对于生产来说，你不会遵循同样的步骤。

如何利用云计算建立Ghost CMS

如果你在本地安装 Ghost 时遇到任何问题，或者可能太复杂，或者你的驱动器上没有足够的空间，你可以使用像 digital press 这样的工具或任何其他云服务，如 GCP 或 AWS，Digital Ocean，等等。

我喜欢 digital press，因为它有一个免费计划。其他云服务不提供这一点，这就是为什么我建议它。

如何获得博客模板

从头开始创建一个新的博客可能很困难。在本教程中，我们将使用一个来自 the frontend web 的预构建好的模板。所有的模板都有一个开源的 MIT 许可，所以你可以使用它们，而且你不需要设置一切。

我从里面挑选了 Open-blog 的模板。

如何设置 Next.js

设置 Next 是本教程的主要部分之一，你将花时间和精力在编码、调试和部署网站上。

以下是要运行的命令，取决于你使用的是 npx、yarn，还是 pnpm：

npx create-next-app@latest --experimental-app

# or

yarn create next-app --experimental-app

# or

pnpm create next-app --experimental-app

安装 nextjs 的时候使用新的实验性功能。

创建一个新的 Nextjs 应用程序。

完成安装过程后，我们必须为博客安装一些额外的 Node 包。

这些 Node 包可以帮助你加快开发进程。请确保安装以下所有的包，以便跟上本指南：

要安装的 Node 包

pnpm add @tryghost/content-api(required)
pnpm add @types/tryghost__content-api (required by TypeScript)
pnpm add tailwindcss postcss autoprefixer
pnpm add @tailwindcss/typography
pnpm add react-icons
pnpm add date-fns
pnpm add next-themes
pnpm add @radix-ui/react-popover

以下是这些包的作用：

@tryghost/content-api 是一个 Ghost JavaScript 客户端库，用于获取content API数据。
@types/tryghost__content-api 包含@tryghost/content-api 的类型定义。
TailwindCSS、autoprefixer 和 PostCSS 都是在使用时需要的包。 Tailwind CSS.
@tailwindcss/typography 用于用 Tailwind CSS 处理动态排版的包。
next-themes 主题包，如在你的网站上从黑暗模式切换到日间模式。
react-icons为项目提供了大量的 SVG 图标。这样一来，你就不需要手动下载它们了。
@radix-ui/react-popover是 Radix UI 生态系统的一部分。我选择 Radix 的弹出式组件来设计网站上的搜索组件。
date-fns 有助于将你的published_at日期转换成不同的日期格式的包。

在学习本教程之前，需要知道什么

在构建这个项目之前，我强烈建议在 YouTube 上观看一些教程（尤其是如果你是 Next.js 的初学者）。这些将帮助你了解有关 Next.js app 文件夹的实验性功能一些基本知识。

每个视频将解释同一类主题。如果你看了这四个视频中的每一个，你就对 Next.js 应用文件夹的工作原理有了基本的了解。这将使这个高级教程更容易理解。

Vercel

在本教程中，Lee Robinson 介绍了路由(route)、动态路由段(dynamic route segments)、数据获取(data fetching)、缓存(caching)和元数据(metadata)的基础知识。

Sakura Dev

Sakura Dev 用实例教你 Next.js 页面和 App 文件夹以及路由之间的区别。

Tuomo Kankaanpaa

Tuomo Kankaanpaa 教你了解 Next 应用程序的文件夹路由(folder routing)、布局(layouts)和服务器组件(server components)。

Piyush Garg

Piyush Garg 编译了所有 Next 的新功能，并将其转换为一个小的速成课程，并建立了一个演示项目。

现在你已经准备好了，让我们开始建立我们的博客。

文件夹结构

对于我们的演示应用程序，我们的文件夹结构看起来像这样：

.
├── next.config.js
├── next-env.d.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── public
├── README.md
├── search.json
├── src
│   └── app
│       ├── authors
│       │   └── [slug]
│       │       └── page.tsx
│       ├── BlogLayout.tsx
│       ├── cards.min.css
│       ├── Card.tsx
│       ├── error.tsx
│       ├── favicon.ico
│       ├── Footer.tsx
│       ├── ghost-client.ts
│       ├── globals.css
│       ├── Header.tsx
│       ├── layout.tsx
│       ├── not-found.tsx
│       ├── pages
│       │   └── [slug]
│       │       └── page.tsx
│       ├── page.tsx
│       ├── pagination
│       │   └── [item]
│       │       └── page.tsx
│       ├── Pagination.tsx
│       ├── read
│       │   └── [slug]
│       │       ├── Newsletter.tsx
│       │       └── page.tsx
│       ├── Search.tsx
│       ├── SocialIcons.tsx
│       └── tags
│           └── [slug]
│               └── page.tsx
├── tailwind.config.js
└── tsconfig.json

13 directories, 30 files

使用 Nextjs 和 Ghost cms 的文件夹结构

如何配置Ghost CMS和Next.js

下一步是为 Ghost Content API 设置数据获取。这就是为什么我们安装了上面的@tryghost/content-api包。

Ghost CMS 带有两种类型的 API：第一种是内容 API，第二种是管理 API。对于博客，我们将使用内容 API。

内容 API 是一个 RESTful API，为 Ghost 数据库获取已发布的内容。它是一个只读的 API。你不能用它来调用 POST 请求。

为了配置它，我们在src/app文件夹下创建了一个新的文件ghost-client.ts。在该文件中，我们有一个新的 Ghost API 实例。

// ghost-client.ts

import GhostContentAPI from '@tryghost/content-api';

// Create API instance with site credentials
const api = new GhostContentAPI({
  url: process.env.GHOST_URL as string,
  key: process.env.GHOST_KEY as string,
  version: 'v5.0'
});

创建一个新的 Ghost CMS 实例。

我们需要博客的 URL、Key 和版本来在 Next 中配置 Ghost 的内容 API。你可以在 Ghost 仪表盘中找到 URLs 和 Key 属性，以及版本值，它是你当前 Ghost CMS 的版本。

进入 Ghost 仪表板：

获取你的 KEY 和 URL

去到 dashboard > settings > integrations > Your-intergration-id，获得你的 GHOST_URL 和 GHOST_KEY。现在你可以复制这两份信息，并将其粘贴在你的 .env.local 文件.

获得你的 GHOST_KEY 和 GHOST_URL

了解Next.js 13 app文件夹

随着 Next.js 13 的发布，Next.js 的pages文件夹和app文件夹发生了很多变化。我们现在就来讨论一些重要的东西，在构建应用时再讨论更多：

没有_app、_document、getServerSideProps、getStaticProps、getStaticPaths、404和useRouter
现在它将_app和_document文件与layout文件相结合。
useRouter是从next/navigation中导入的。
404文件被notFound()函数取代。
error.tsx文件提供了对错误边界的反应等功能。
现在index.js文件被page.js取代。
传递动态路由段pages/blog/[slug].js被改变，下一个应用程序目录看起来像这样： app/blog/[slug]/page.js。

例子

为了理解 Next 带有实验性的 app 文件夹，让我们看看一个真实的例子：

tag page => app/tag/[slug]/page.ts。
category => app/tag/[slug]/page.ts。

现在你可以在每个路由里面创建五个文件。例如，如果你在你的 app 文件夹中创建一个tag 或 category 路由，那么你可以在你的 app 路由文件夹中创建四个文件。

page.ts（必填）：它是你的主文件。
layout.ts（可选）：它有助于设计你的布局。
loading.ts（可选）：它用 React suspense 创建一个加载指标。
error.ts（可选）：它帮助处理你的 React 应用程序中的错误。
components（可选）：你也可以在你的路由中创建另一个组件。

让我们通过一个真实的例子来了解新的 Next.js 13 路由是如何工作的：你的标签路由文件夹看起来像这样。

app / tag / [slug] / page.ts;
app / tag / [slug] / loading.ts;
app / tag / [slug] / layout.ts;
app / tag / [slug] / error.ts;
app / tag / [slug] / my - card - component.ts;

Tag 文件夹结构

项目的演示数据

你不必担心创建一个演示或假的博客文章数据。对于你的测试，你可以从这个GitHub 仓库下载它。

如何建立博客

我们将在下面的章节中对博客的每个部分进行梳理和构建，这样你就可以在家里一个人跟着做。

如何建立页眉(header)
如何建立页脚(footer)
如何建立 layout
如何建立主页(homepage)
如何建立阅读页(reading page)
如何建立标签页(tag page)
如何建立作者页(author page)
如何建立单页(single pages)
如何处理分页(pagination)
Next.js SEO
如何开启搜索
错误处理
如何用 webhooks 重建你的静态网站

如何建立页眉(header)

网站的第一个也是最主要的部分是页眉(header)。首先，我们将为我们的演示博客创建一个简单的页眉(header)。我们的页眉最终将看起来像这样：

页眉的设计

首先是 logo，接下来是带有各种元素的导航栏（nav），最后是图标部分（icon）。所有的数据都来自 Ghost CMS 的 API。你可以在 Ghost CMS 里面改变东西，而且会反映在网站上。

下面是建立标题组件的代码：

// Header.tsx

import Link from 'next/link';
import SocialIcons from './SocialIcons';
import Image from 'next/image';
import type { Settings } from '@tryghost/content-api';

function Header({ setting }: { setting: Settings }) {
  return (
    
      
        {/* Logo for blog */}
        
          {setting.logo !== null ? (
            
          ) : (
            setting.title
          )}
        
        
          
            {
              /* Blog Navigation Edit in GHOST CMS  */
              setting.navigation !== undefined
                ? setting?.navigation.map((item) => (
                    
                      {item.label}
                    
                  ))
                : ' '
            }
          
        
        
      
    
  );
}
export default Header;

页脚(footer)也是博客网站的一个重要部分。它显示你的重要信息和各种有用的链接。

页脚的设计

我设计了一个带有版权文本的基本页脚（footer），并为网站添加了社交图标。这些社交图标来自 Ghost CMS 的 API。

// Footer.tsx

import { FaTwitter, FaFacebook } from 'react-icons/fa';
import Link from 'next/link';
import type { Settings } from '@tryghost/content-api';

function Footer({ setting }: { setting: Settings }) {
  return (
    
      
        
          
            2023 copyright frontend web
          
        

        
          
            {setting.twitter !== null ? (
              
                
                  
                
              
            ) : (
              ' '
            )}

            {setting.facebook !== null ? (
              
                
                  
                
              
            ) : (
              ' '
            )}
          
        
      
    
  );
}

export default Footer;

如何建立 layout

我为博客设计了一个基本的布局（layout）。为了在 Next.js 中构建布局，有一个特殊的layout.tsx文件。

在创建布局(layout)设计之前，我们需要定义一个getNavigation 函数来从 Ghost 中获取导航和基本的网站相关数据。

// ghost-client.ts

export async function getNavigation() {
  return await api.settings.browse();
}

Fetch

这些数据看起来像这样

{
  title: 'Rajdeep Singh',
  description: 'Thoughts, stories and ideas.',
  logo: 'http://localhost:2368/content/images/2023/04/nextjsandghostlogo-2.png',
  icon: 'http://localhost:2368/content/images/size/w256h256/2023/04/nextjs-60pxx60px.png',
  accent_color: '#d27fa0',
  cover_image: 'https://static.ghost.org/v4.0.0/images/publication-cover.jpg',
  facebook: 'ghost',
  twitter: '@ghost',
  lang: 'en',
  locale: 'en',
  timezone: 'Etc/UTC',
  codeinjection_head: null,
  codeinjection_foot: null,
  navigation: Array(5) [
    { label: 'Home', url: '/' }, { label: 'JavaScript', url: '/tags/javascript/' }, { label: 'Nextjs', url: '/tags/nextjs/' },
    { label: 'Reactjs', url: '/tags/reactjs/' }, { label: 'Ghost CMS', url: '/tags/ghost-cms/' }
  ],
  secondary_navigation: Array(1) [ { label: 'Login', url: '#/portal/' } ],
  meta_title: 'My demo post',
  meta_description:
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
  og_image: null,
  og_title: null,
  og_description:
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
  twitter_image: null,
  twitter_title: null,
  twitter_description:
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
  members_support_address: 'noreply',
  members_enabled: true,
  members_invite_only: false,
  paid_members_enabled: false,
  firstpromoter_account: null,
  portal_button_style: 'icon-and-text',
  portal_button_signup_text: 'Subscribe',
  portal_button_icon: null,
  portal_plans: Array(1) [ 'free' ],
  portal_name: true,
  portal_button: true,
  comments_enabled: 'all',
  url: 'http://localhost:2368/',
  version: '5.39'
}

api.settings.browse()接收的数据

getNavigation函数返回设置数据，然后我们把数据作为 props 传给页眉(header)和页脚(footer)组件。

我们的主文件layout.tsx在服务器端工作。它通过 React use hook 帮助在服务器端获取数据。

// Layout.tsx

import './globals.css';
import BlogLayout from './BlogLayout';
import { getNavigation } from './ghost-client';
import { use } from 'react';
import type { Settings } from '@tryghost/content-api';

interface UpdateSettings extends Settings {
  accent_color?: string;
}

export default function RootLayout({
  children
}: {
  children: React.ReactNode;
}) {
  const settings: UpdateSettings = use(getNavigation());

  return (
    
      
        {children}
      
    
  );
}

BlogLayout 组件

BlogLayout组件在客户端工作。在 Next.js 应用程序文件夹中，你可以通过以下 use client 的语法轻松地将服务器端的组件转换到客户端。

BlogLayout 组件的目的是包含ThemeProvider、页眉(header)和页脚(footer)。ThemeProvider 是一个高阶组件，它提供额外的功能，比如将主题从深色改为浅色。我们用 ThemeProvider 的高阶组件来包含网站内的内容。在旧页面目录中，我们用 nextjs 中的 _app.ts自定义应用程序实现类似的功能。

ThemeProvider 组件有助于将主题从浅色变为深色模式。

'use client';

// BlogLayout.tsx

import Footer from './Footer';
import Header from './Header';
import { ThemeProvider } from 'next-themes';
import type { Settings } from '@tryghost/content-api';
function Layout({
  setting,
  children
}: {
  setting: Settings;
  children: React.ReactNode;
}) {
  return (
    
      
      {children}
      
    
  );
}
export default Layout;

BlogLayout.tsx component

如何建立主页(homepage)

Next.js 有一个特殊的app/page.tsx文件，用于设计和建立主页(home page)。我们的博客网站的主页看起来就像你下面看到的那样。我们在主页(home page)上导入页眉(header)、卡片(card)、分页(pagination)和页脚(footer)。页眉(header)和页脚(footer)是layout.tsx的一部分。

Home page（主页）

首先，我们在ghost-client.ts文件中定义的getPosts函数的帮助下，从 Ghost CMS 获取所有帖子数据。

// ghost-client.ts

export async function getPosts() {
  return await api.posts
    .browse({
      include: ['tags', 'authors'],
      limit: 10
    })
    .catch((err) => {
      throw new Error(err);
    });
}

api.post.browse()接收的数据

默认情况下，api.post.browse()只返回文章数据，但你可以轻松地扩展它。在每篇文章或帖子数据中，我们还用include的帮助包括标签和作者。然后，我们将文章限制设置为 10 条。

数据看起来像这样

 [
  {
    id: '6422a742136f5d40f37294f5',
    uuid: '8c2fcfda-a6e4-4383-893b-ba18511c0f67',
    title: 'Demo Posts with Nextjs and Ghost Editor',
    slug: 'demo-posts-with-nextjs-and-reactjs',
    html: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text si
nce the 1500s when an unknown printer scrambled a galley of type and scrambled it to make a type specimen book. 
It has survived five centuries and the leap i
nto electronic typesetting, remaining essentially unchanged. 
It was popularised in the 1960s with Letraset sheets containing Lorem Ipsum passages and, more r
ecently, desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.

Build and deploy
Why do we use it?
It is
 a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
The point of using Lorem Ipsum is tha
t it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
Many desktop
publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
infancy. 
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by i
njected humour, or randomised words which don't look even slightly believable. 
If you are going to use a passage of Lorem Ipsum, you need to be sure there is
n't anything embarrassing hidden in the middle of text. 
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. 
It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generat
e Lorem Ipsum which looks reasonable. 
The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
💡
My note is here 
Produc
t
My blog list
youtube
In 2022, we enabled developers to create at the moment of inspiration, now with over 2 mill
ion deployments per week.

Here's what we shipped ↓ pic.twitter.com/6k7Xmbpna3— Vercel (@ver
cel) January 5, 2023\n` +
      '\n' +
      '
What is Progres
sive Web App and How to enable it in nextjs Application?
A detailed guide to Progressive Web Apps: How to use it with next
js and publish on Google play store, Microsoft store, Meta Quest, and…
FrontEnd webRajdeep singh<
/div>
Bookmark<
/figcaption>
Thank you',
    comment_id: '6422a742136f5d40f37294f5',
    feature_image: 'https://images.unsplash.com/photo-1543966888-7c1dc482a810?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDE2fHxqYXZhc2Nya
XB0fGVufDB8fHx8MTY3OTk5MjY1NA&ixlib=rb-4.0.3&q=80&w=2000',
    featured: false,
    visibility: 'public',
    created_at: '2023-03-28T08:37:22.000+00:00',
    updated_at: '2023-03-28T08:51:38.000+00:00',
    published_at: '2023-03-28T08:50:44.000+00:00',
    custom_excerpt: 'It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. ',
    codeinjection_head: null,
    codeinjection_foot: null,
    custom_template: null,
    canonical_url: null,
    tags: [ [Object] ],
    authors: [ [Object] ],
    primary_author: {
      id: '1',
      name: 'Rajdeep Singh',
      slug: 'rajdeep',
      profile_image: 'https://www.gravatar.com/avatar/dafca7497609ae294378279ad1d6136c?s=250&r=x&d=mp',
      cover_image: null,
      bio: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
      website: 'https://officialrajdeepsingh.dev',
      location: 'India',
      facebook: 'officialrajdeepsingh',
      twitter: '@Official_R_deep',
      meta_title: null,
      meta_description: null,
      url: 'http://localhost:2368/author/rajdeep/'
    },
    primary_tag: {
      id: '6422aa9a136f5d40f3729552',
      name: 'demo',
      slug: 'demo',
      description: null,
      feature_image: null,
      visibility: 'public',
      og_image: null,
      og_title: null,
      og_description: null,
      twitter_image: null,
      twitter_title: null,
      twitter_description: null,
      meta_title: null,
      meta_description: null,
      codeinjection_head: null,
      codeinjection_foot: null,
      canonical_url: null,
      accent_color: null,
      url: 'http://localhost:2368/tag/demo/'
    },
    url: 'http://localhost:2368/demo-posts-with-nextjs-and-reactjs/',
    excerpt: 'It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. ',
    reading_time: 3,
    access: true,
    comments: true,
    og_image: null,
    og_title: null,
    og_description: null,
    twitter_image: null,
    twitter_title: null,
    twitter_description: null,
    meta_title: null,
    meta_description: null,
    email_subject: null,
    frontmatter: null,
    feature_image_alt: 'Demo Posts with Nextjs and Ghost Editor',
    feature_image_caption: 'Photo by Paul Esch-Laurent /
Unsplash'
  },
meta:{
    pagination: { page: 1, limit: 10, pages: 2, total: 12, next: 2, prev: null }
  }
]

由api.post.browse()接收的数据

现在我们在服务器端调用getPosts函数。它返回所有的帖子数据以及相关的标签和作者。现在你可以用map()函数循环浏览这些数据。

我们将数据传入app/page.tsx到card.tsx组件。我们把文章数据作为 prop 传给卡片组件。

// src/app/page.tsx

import { getPosts } from './ghost-client';
import Card from './Card';

export default async function Home() {
  const getPost = await getPosts();

  return (
    <>
      
        {getPost?.map((item) => {
          return ;
        })}
      
    
  );
}

Design home /app/page.tsx

Card 组件

我为博客设计了一张基本的卡片。卡片组件看起来像这样：

卡片组件

我把来自主页的每项数据都渲染成 prop，并用Card.tsx在网站上显示。

// Card.tsx

import Image from 'next/image';
import Link from 'next/link';
import type { PostOrPage } from '@tryghost/content-api';
import { format } from 'date-fns';

function Card({ item }: { item: PostOrPage }) {
  return (
    
      {item.featured !== null && item.feature_image !== undefined ? (
        
          
        
      ) : (
        ' '
      )}

      
        
          {item.published_at !== null && item.published_at !== undefined ? (
            
              {format(new Date(item.published_at), 'dd MMMM, yyyy')}
            
          ) : (
            ''
          )}
           , 
          
            {item.reading_time} min read
          
        

        
          
            {item.title}
          
        
      
    
  );
}

export default Card;

如何建立阅读页(reading page)

阅读页面(reading page)是博客网站的第二大重要页面。如果人们不能弄清楚如何阅读作者写的东西，这对前端开发者来说是个大问题。

阅读页

首先，我们从 Ghost CMS 的 API 中获得一篇基于其 slug(一种模板) 的文章。我们用 链接(Link) 组件把它传递给 卡片(Card)组件。

// ghost-client.ts

export async function getSinglePost(postSlug: string) {
  return await api.posts
    .read(
      {
        slug: postSlug
      },
      { include: ['tags', 'authors'] }
    )
    .catch((err) => {
      console.error(err);
    });
}

检索基于 slug 的单个帖子。

getSinglePost()函数返回单篇文章的数据，你可以在页面上渲染这些数据。

// src/app/read/[slug]/page.tsx

import Newsletter from './Newsletter';
import Link from 'next/link';
import { getSinglePost, getPosts } from '../../ghost-client';
import Image from 'next/image';
// import icon
import { FaAngleLeft } from 'react-icons/fa';

// types for typescript
import type { Metadata } from 'next';
import type { PostOrPage } from '@tryghost/content-api';

// format the date
import { format } from 'date-fns';

// css for card
import '../../cards.min.css';

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({
    slug: post.slug
  }));
}

async function Read({ params }: { params: { slug: string } }) {
  const getPost = await getSinglePost(params.slug);

  return (
    <>
      
        
          
            
              
                 Back
              

              {getPost.primary_tag ? (
                
                  # {getPost?.primary_tag.name}
                
              ) : (
                ''
              )}
            

            
              {getPost.title}
            

            {getPost.excerpt}

            
              
                
                  
                  {getPost.primary_author ? (
                    
                      {getPost?.primary_author.name}
                    
                  ) : (
                    ' '
                  )}

                  {getPost.published_at ? (
                    
                      {format(new Date(getPost?.published_at), 'dd MMMM, yyyy')}
                    
                  ) : (
                    ''
                  )}

                  

                  
                    {' '}
                    {getPost.reading_time} Min Read
                  
                
              
            

            
              
              
            

            
          
        
      
      
    
  );
}
export default Read;

你用dangerouslySetInnerHTML渲染帖子的 HTML 数据。但是你需要写很多 CSS 来处理来自 Ghost CMS API 的动态内容。

为了解决这个问题，我使用了@tailwindcss/typography包。我还从 Ghost 下载了cards.min.css。现在你不需要在你的 Next 应用程序中写一行 CSS 了。

用generateStaticParams函数生成静态网站。之前，我们使用getStaticProps函数。

// ghost-client.ts

export async function generateStaticParams() {
  // fetch All posts

  const posts = await getPosts();

  // return the slug

  return posts.map((post) => ({
    slug: post.slug
  }));
}

为文章阅读页面(reading page)生成静态网站 slug

如何建立阅读页(reading page)

我为博客设计了一个简单的标签页(Tag Page)。标签页显示与所使用的标签(tags)有关的文章。

你也可以创建一个分类页(category)。标签页(Tag pages)和分类页(category pages)使用相同的逻辑和功能。

标签页

与阅读页(reading page)类似，我们将根据 Ghost CMS API 的标签来获取文章。

// ghost-client.ts

// return all posts realted to tag slug
export async function getTagPosts(tagSlug: string) {
  return await api.posts
    .browse({ filter: `tag:${tagSlug}`, include: 'count.posts' })
    .catch((err) => {
      throw new Error(err);
    });
}

// return all the slugs to build static with generateStaticParams
export async function getAllTags() {
  return await api.tags
    .browse({
      limit: 'all'
    })
    .catch((err) => {
      console.log(err);
    });
}

getTagPosts()函数返回所有与特定标签相关的可用帖子。

在用getTagPosts()接收所有帖子后，我们用map()方法渲染所有帖子。

// src/app/tag/[slug]/page.tsx

import React from 'react';
import Card from '../../Card';

import { getTagPosts, getAllTags } from '../../ghost-client';

import { notFound } from 'next/navigation';

import type { PostsOrPages } from '@tryghost/content-api';

export async function generateStaticParams() {
  const allTags: Tags = await getAllTags();

  let allTagsItem: { slug: string }[] = [];

  // genrate the slug for static site

  allTags?.map((item) => {
    allTagsItem.push({
      slug: item.slug
    });
  });

  return allTagsItem;
}

async function Tag({ params }: { params: { slug: string } }) {
  let tagPosts: PostsOrPages = await getTagPosts(params.slug);

  // Handling 404 error

  if (tagPosts.length === 0) {
    notFound();
  }

  return (
    
      
        
          More articles from {params.slug.split('-').join(' ')}
        

        
          {tagPosts.map((item) => (
            
          ))}
        
      
    
  );
}

export default Tag;

用generateStaticParams函数生成静态网站。它有助于生成静态构建的 slug。

// ghost-client.ts

export async function getAllTags() {
  return await api.tags
    .browse({
      limit: 'all'
    })
    .catch((err) => {
      console.log(err);
    });
}

为标签页生成静态网站 slug

如何建立作者页(author page)

博客网站的最后一个也是最重要的一个页面是作者页。在这里，读者可以了解更多关于作者的信息。

对于这个演示博客，我为作者设计了一个基本页面。

作者页

我们将以类似于建立标签页的方式来建立这个页面。首先，我们从 Ghost CMS 的 API 中获取作者的元数据和作者的帖子。

// ghost-client.ts

// get author meta Data

export async function getSingleAuthor(authorSlug: string) {
  return await api.authors
    .read(
      {
        slug: authorSlug
      },
      { include: ['count.posts'] }
    )
    .catch((err) => {
      console.log(err);
    });
}

// get author related posts

export async function getSingleAuthorPosts(authorSlug: string) {
  return await api.posts
    .browse({ filter: `authors:${authorSlug}` })
    .catch((err) => {
      console.log(err);
    });
}

// get All author from Ghost CMS for generateStaticParams

export async function getAllAuthors() {
  return await api.authors
    .browse({
      limit: 'all'
    })
    .catch((err) => {
      throw new Error(err);
    });
}

getSingleAuthor()根据作者的名字返回单个作者的数据，getSingleAuthorPosts()函数返回与作者有关的所有帖子。

我们在map()方法的帮助下渲染帖子数据。

// src/app/author/[slug]/page.tsx

import React from 'react';
import Link from 'next/link';
import { FaFacebook, FaTwitter, FaGlobe } from 'react-icons/fa';
import Card from '../../Card';

import {
  getSingleAuthor,
  getSingleAuthorPost,
  getAllAuthors
} from '../../ghost-client';

import Image from 'next/image';
import { notFound } from 'next/navigation';

import type { Author, PostsOrPages } from '@tryghost/content-api';

export async function generateStaticParams() {
  const allAuthor: Author[] = await getAllAuthors();

  let allAuthorItem: { slug: string }[] = [];

  allAuthor.map((item) => {
    allAuthorItem.push({
      slug: item.slug
    });
  });
  return allAuthorItem;
}

async function AuthorPage({ params }: { params: { slug: string } }) {
  const getAuthor: Author = await getSingleAuthor(params.slug);

  const allAuthor: PostsOrPages = await getSingleAuthorPost(params.slug);

  // Handling 404 errors
  if (allAuthor?.length === 0) {
    notFound();
  }

  return (
    <>
      
        
          
            {getAuthor?.profile_image !== undefined ? (
              
            ) : (
              ''
            )}

            {getAuthor?.name ? (
              
                {getAuthor?.name.split(' ')[0]}
                
                  {getAuthor?.name?.split(' ')[1]}
                
              
            ) : (
              ''
            )}

            {getAuthor?.bio} 

            
              {getAuthor?.website !== null ? (
                
                  
                    
                  {' '}
                
              ) : (
                ' '
              )}

              {getAuthor?.twitter !== null ? (
                
                  
                    
                  
                
              ) : (
                ' '
              )}

              {getAuthor?.facebook !== null &&
              getAuthor.facebook !== undefined ? (
                
                  
                    {' '}
                    
                  
                
              ) : (
                ' '
              )}
            
          
        
      

      
        
          
            More articles from {getAuthor?.name}
          

          
            {allAuthor?.map((item) => (
              
            ))}
          
        
      
    
  );
}
export default AuthorPage;

为了生成静态网站的作者 slug，我们需要使用generateStaticParams函数。我们不需要其他东西来建立静态网站。

// ghost-client.ts

// Build Static Site

export async function generateStaticParams() {
  const allAuthor: Author[] = await getAllAuthors();

  let allAuthorItem: { slug: string }[] = [];

  allAuthor.map((item) => {
    allAuthorItem.push({
      slug: item.slug
    });
  });
  return allAuthorItem;
}

如何建立作者页(author page)

对于像 关于(About)、联系(Contact)、隐私政策(Privacy Policy) 等单页(single page)，你也可以用 Ghost Content API 创建它们。

我们的单页设计看起来像这样：

博客页

首先，你需要从 Ghost Content API 中获取所有页面和单页的数据。

// ghost-client.tsx

// fetch all pages

export async function getSinglePage(pageSlug: string) {
  return await api.pages
    .read({
      slug: pageSlug
    })
    .catch((err) => {
      console.error(err);
    });
}

// single page data

export async function getSinglePage(pageSlug: string) {
  return await api.pages
    .read(
      {
        slug: pageSlug
      },
      { include: ['tags'] }
    )
    .catch((err) => {
      console.error(err);
    });
}

getSinglePage(page-slug)函数返回基于 slug 页面的单一页面数据，getAllPages()函数返回所有可用的已发布页面数据，以便用generateStaticParams()函数生成动态参数。

// src/app/pages/[slug]/page.tsx

import { getSinglePage, getAllPages } from '../../ghost-client';
import { notFound } from 'next/navigation';
import type { PostOrPage } from '@tryghost/content-api';
import '../../cards.min.css';

// genrate Static slug or params for blog

export async function generateStaticParams() {
  const pages = await getAllPages();

  return pages.map((post) => ({
    slug: post.slug
  }));
}

async function Pages({ params }: { params: { slug: string } }) {
  // fetch single page
  const getPage = await getSinglePage(params.slug);

  // handle 404 error
  if (!getPage) {
    notFound();
  }

  return (
    <>
      
        
          
            
              {getPage.title}
            

            
          
        
      
    
  );
}
export default Pages;

如何处理分页（pagination）

分页(Pagination )有助于加快你的网站访问速度，并将你的网站分成更小的部分，更容易消化的页面。你可以用 prev和 next 将你的文章相互连接起来。

meta:{
    pagination: { page: 1, limit: 10, pages: 2, total: 12, next: 2, prev: null }
 }

next 跳转到下一个页面，prev 跳转到上一个页面

首先，我们将创建一个Pagination.tsx文件作为 React 组件。

// Pagination.tsx

import Link from 'next/link';
import { Pagination } from '@tryghost/content-api';

function PaginationItem({ item }: { item: Pagination }) {
  let paginationItems = [];

  for (let index = 1; index <= item?.pages; index++) {
    paginationItems.push(
      
        
          {index}
        
      
    );
  }

  return (
    
      
        
          {item.prev ? (
            
              Prev
            
          ) : (
            ' '
          )}
        

        {paginationItems}

        
          {item.next ? (
            
              Next
            
          ) : (
            ' '
          )}
        
      
    
  );
}

export default PaginationItem;

当你调用api.post.browse({ limit: 10 })请求时，API 端点会返回十个帖子和一个带有pagination的meta对象。

`api.post.browse({ limit: 10 })`返回的数据看起来像这样

 [
  {title: 'Demo Posts with Nextjs and Ghost Editor',... },
  {title: Trigger the hook and rebuild the nextjs site',... }

meta:{
    pagination: { page: 1, limit: 10, pages: 2, total: 12, next: 2, prev: null }
  }
]

api.posts.browse({ limit: 10 })

现在基于meta，我们可以创建分页，并将meta.pagination作为 prop 传递给Pagination组件。

// src/app/page.tsx

import { getPosts } from './ghost-client';
import Pagination from './Pagination';

export default async function Home() {
  const getPost = await getPosts();

  const AllPostForSerach = await getSearchPosts();

  return (
    <>
      {/* rest of code  */}
      
    
  );
}

为了启用动态分页(dynamic pagination)，我们将在博客中创建一个src/app/pagination/[item]/page.tsx路由。你可以为分页路由(pagination route)使用任何你想要的名字。

// ghost-client.tsx

// return all posts for generateStaticParams

export async function getPosts() {
  return await api.posts
    .browse({
      include: ['tags', 'authors'],
      limit: 10
    })
    .catch((err) => {
      throw new Error(err);
    });
}

//
export async function getPaginationPosts(page: number) {
  return await api.posts
    .browse({
      include: ['tags', 'authors'],
      limit: 10,
      page: page
    })
    .catch((err) => {
      throw new Error(err);
    });
}

getPosts是用来渲染分页上的Pagination组件。重要的部分是getPaginationPosts()函数，它根据分页的页码返回帖子。

// src/app/pagination/[item]/page.tsx

import { getPaginationPosts, getPosts } from '../../ghost-client';
import Card from '../../Card';
import PaginationItem from '../../Pagination';
import type { Metadata } from 'next';
import type { PostsOrPages } from '@tryghost/content-api';

export async function generateStaticParams() {
  const posts: PostsOrPages = await getPosts();

  let paginationItem: { item: number }[] = [];

  for (let index = 1; index <= posts?.meta.pagination.pages; index++) {
    paginationItem.push({
      item: index
    });
  }

  return paginationItem;
}

export default async function Pagination({
  params
}: {
  params: { item: string };
}) {
  let getParams: number = Number.parseInt(params.item);

  const getPost: PostsOrPages = await getPaginationPosts(getParams);

  return (
    <>
      
        {getPost?.map((item) => {
          return ;
        })}
      

      
    
  );
}

use

Next.js SEO

如果你是一个博主，你知道 SEO 在帮助人们找到你的博客和你的文章方面是多么重要。对于 SEO，Next.js 提供了一个generateMetadata功能，为你的网站生成动态 SEO 元数据。这意味着你不需要任何额外的包来进行 SEO。

在这个例子中，我将解释如何为博客只在主页和阅读页上启用 SEO。你可以使用同样的逻辑在你的任何其他页面上启用它。

首先，让我们看看如何在主页上启用 SEO：

// ghost-client.ts

// Get you settings meta data from Ghost CMS
export async function getNavigation() {
  return await api.settings.browse();
}

// src/app/page.tsx

import { getNavigation } from './ghost-client';

export async function generateMetadata(): Promise {
  const Metadata = await getNavigation();
  return {
    title: Metadata.title,
    description: Metadata.description,
    keywords: ['Next.js', 'React', 'JavaScript']
  };
}

现在我们来看看如何在阅读页(reading page)上启用 SEO:

// ghost-client.ts

export async function getSinglePost(postSlug: string) {
  return await api.posts
    .read(
      {
        slug: postSlug
      },
      { include: ['tags', 'authors'] }
    )
    .catch((err) => {
      console.error(err);
    });
}

generateMetadata有 params prop，可以帮助访问 slug。然后，基于 slug，我们获得数据并返回。

export async function generateMetadata({
  params
}: {
  params: { slug: string };
}): Promise {
  const metaData: PostOrPage = await getSinglePost(params.slug);

  let tags = metaData?.tags.map((item) => item.name);

  return {
    title: metaData.title,
    description: metaData.description,
    keywords: tags,
    openGraph: {
      title: metaData.title,
      description: metaData.excpet,
      url: metaData.url,
      keywords: tags,
      images: [
        {
          url: metaData.feature_image
        }
      ],
      locale: metaData.locale,
      type: 'website'
    }
  };
}

如何开启搜索

在静态博客上启用搜索是很难从头做起的。相反，你可以使用第三方的 Node 页面，如 Orama 或 Flex search。

对于我们的演示，我们创建了一个非常简单的搜索栏功能，无需安装任何额外的软件包。

首先，我们从 Ghost CMS 的 API 中获取所有帖子。

// ghost-client.ts

export async function getSearchPosts() {
  return await api.posts.browse({ limit: "all"}).catch(err => {
    console.log(err)
  });

在我们用JSON.stringify()的帮助下将其转换为字符串后，我们再创建一个新的search.json文件。在每次请求时，它都会更新或重写我们的search.json文件。

// src/app/page.tsx

import { getSearchPosts } from './ghost-client';
import * as fs from 'node:fs';

export default async function Home() {
  // get All posts for search
  const AllPostForSerach = await getSearchPosts();

  // Enable getSearch

  try {
    const jsonString = JSON.stringify(AllPostForSerach);

    fs.writeFile('search.json', jsonString, 'utf8', (err) => {
      if (err) {
        console.log('Error writing file', err);
      } else {
        console.log('Successfully wrote file');
      }
    });
  } catch (error) {
    console.log('error : ', error);
  }

  return (
    <>
      
        {/* rest code... */}
      
    
  );
}

当你在搜索输入中输入文本时，根据文本查询，我们比较查询或文本在search.json文件的数据。如果它与查询的文章标题相匹配，那么我们就存储searchPost变量，最后我们在searchPost变量页面呈现存储的数据。

'use client';

import React, { useEffect, useState } from 'react';
import * as Popover from '@radix-ui/react-popover';
import { FaSearch } from 'react-icons/fa';
import Link from 'next/link';
import searchData from '../../search.json';
import type { PostOrPage } from '@tryghost/content-api';

let searchPost: PostOrPage[] = [];

function Search() {
  const [query, setQuery] = useState(null);

  useEffect(() => {
    searchPost.length = 0;

    searchData.map((item: PostOrPage) => {
      if (
        item?.title.trim().toLowerCase().includes(query?.trim().toLowerCase())
      ) {
        searchPost.push(item);
      }
    });
  }, [query]);

  return (
    
      
        
      

      
        
          
            
              Search bar{' '}
            
            
              
                
              
               setQuery(event?.target.value)}
                className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                placeholder="Start searching here ..."
                required
              />
            
          

          {serachPost.length > 0
            ? serachPost.map((item) => {
                return (
                  
                    
                      
                        {item.title}
                      
                    
                  
                );
              })
            : ' '}
        
      
    
  );
}

export default Search;

如何开启搜索

Next.js 有两种类型的错误处理。第一种是基于布局，第二种是全局错误处理。对于这里的演示，我们将使用基于布局的错误处理。

Next 提供一个特殊类型的error.tsx文件来处理你网站上的错误。它不处理 404，500 等，它只处理运行时错误。

'use client'; // Error components must be Client components
import React from 'react';
import { useEffect } from 'react';
import Link from 'next/link';
export default function Error({
  error,
  reset
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    
      
        
          
            Something wrong
          
          
            {error.message}
          

          
            
              Back to Homepage
            

            
          
        
      
    
  );
}

如何处理 404 错误

为了处理 Next.js 应用程序文件夹中的 404 错误，你需要在你的文件夹最顶层创建一个not-found.tsx文件。

我们的 404 文件看起来像这样：

404 error

以下是相关代码：

import Link from 'next/link';

function NotFound() {
  return (
    
      
        
          
            404
          
          
            {' '}
            Something wrong
          
          
            Sorry, we cant find that article. You will find lots to explore on
            the home page.
          
          
            Back to Homepage
          
        
      
    
  );
}

export default NotFound;

not-found.tsx错误文件的问题是它在 Next（v13.3.0）中不能自动显示。要显示 404 错误，你需要手动显示该错误。这里是你如何做的：

import { notFound } from 'next/navigation';

async function Read({ params }: { params: { slug: string } }) {
  const getPost = await getSinglePost(params.slug);

  // if not found getPost, then show 404 error

  if (!getPost) {
    notFound();
  }

  return (
    
      rest of code ....
    
  );
}

如何用 webhooks 重新构建你的静态网站

当你创建一个静态网站时，最大的问题发生在有人在 Ghost 中写了一个新的帖子或改变了一个现有的帖子。对于一个个人项目，你可以手动重新部署你的网站。但对于一个较大的网站来说，你不可能在每次发生这种情况时都这样做。

最好的解决办法是使用 webhooks。Ghost 提供 webhook 支持。如果你更新一个现有的帖子或写一个新的帖子，它就会在 Ghost 中更新。

在演示项目中，我们使用 Vercel webhooks 来部署我们的博客。当我们创建一个新的博客或更新网站上的东西时，Ghost 会触发 Vercel webhook。然后 Vercel 根据需要重建网站。

你不需要为这个写代码,只要跟着你的思路，边走边复制粘贴。

如何从 Vercel 获得 webhook

首先，进入 Vercel 仪表板。

Vercel 仪表板

选择你的项目，你将在那里部署你的 Ghost 前台。

在你的 Vercel 仪表板上选择项目

点击你的 Vercel 项目中的设置标签（settings）。

点击 Git 标签

然后点击 Git 标签。向下滚动后，你可以看到 deploy hook 的选择。

转到 deploy hook 部分

输入你的 webhook 名称和分支名称，然后点击 create hook 按钮

复制你的 webhook 网址

点击 copy 按钮，复制你的 vercel webhook。

如何在 Ghost 仪表板中集成 Vercel 的 web hook

当 Ghost 中发生变化时，它就会触发 Vercel 的 webhook URL。然后，Vercel 会重新部署博客网站。

要将 Vercel webhook 与 Ghost 集成，只需遵循以下步骤：

打开 Ghost CMS 仪表板。

Ghost 仪表板

点击设置（齿轮）图标。

Ghost 设置

点击 New custom integration 按键。

添加新的集成

输入 integration 名字

添加 integration 的命名

点击 add webhook 按键。

怎么添加 webhook

首先，输入名称，然后选择事件，并粘贴你从 Vercel 仪表板上复制的 URL。

基于该事件，Ghost 将调用 webhook，你的网站将重新构建。重新部署需要时间，这取决于你的网站有多大，以此类推。

总结

使用 Next.js 和 Ghost CMS，一切都应该正常工作，正如我们在本教程中所做的那样。

但是 Ghost 的一些编辑器组件，比如切换器，在需要 JavaScript 交互的地方，却不能工作。你可以通过编写你自己的 JavaScript 或者获得 Ghost 的 JavaScript 文件，并将其添加到read/[slug]/page.tsx文件中来解决这个问题。

通过结合 Next.js 和 Ghost CMS API，你可以节省大量的主机费用，但你会失去一些功能，如内置的注册(signup)、登录(login)、账户(accounts)、订阅(subscriptions)、搜索栏(search bar)和会员访问级别(member access levels)。

你可以在 Twitter 和 Linkedin 上关注我或联系我。如果你喜欢我的工作，你可以在我的博客、officialrajdeepsingh.dev、frontend web上阅读更多内容，并注册我的免费通讯(free newsletter) 。

你还可以查看 awesome-next，这是一个精心策划的基于 Nextjs 的很棒的库列表，有助于用 Next.js 构建小型和大型应用程序。

这里有一些补充内容：

我在 Next 上写了大量的文章。如果你对 Next 和相关的东西感兴趣，你可以在 Medium 上关注我，并加入 frontend web publication。

Next.js 和 React 有哪些区别？

luojiyin — Sun, 11 Jun 2023 10:00:00 +0000

原文： Next.js vs React – What are the Differences?

大家好！最近，Next.js 13 正在流行，这是一个学习它的好时机。但 Next.js 到底是什么？Next.js 中的预渲染是什么，我们为什么要使用它？

嗯，让我解释一下。

Next.js 是什么？

Next.js 是一个基于 React 的后端框架。

我们在 React 中能做的一切，在 Next.js 中也能做,还有一些额外的功能，如路由、API 调用、认证等等。我们在 React 中没有这些功能。相反，我们必须安装一些外部库和依赖项。例如，React Router 用于单页 React 应用程序的路由。

但在 Next.js 中，情况就不同了。我们不需要依赖外部库来完成这些事情。当我们创建一个 Next.js 应用程序时，它们就被内置在软件包中。

这就是 Next.js 应用与传统 React 应用不同的主要原因。

客户端渲染 VS 服务器端渲染

Next.js 也使用了一种叫做服务器端渲染的东西。而为了理解它的工作原理，我们也需要谈谈客户端渲染。

基本上，客户端就是我们在屏幕上看到的东西（用户界面）。这就是客户端，我们能看到的东西。换句话说，它是代码的前端部分。

另一方面，服务器是我们看不到的东西。它是代码的后端，或服务器代码。

现在，在客户端渲染中，应用程序加载并在浏览器上动态地生成输出。换句话说，浏览器使用 JavaScript 渲染页面。

但在服务器端渲染中，我们在屏幕上看到的用户界面不是由浏览器生成的，而是在服务器上生成的。当一个应用程序加载时，它不需要解析浏览器上的用户界面。相反，它来自于服务器端，是在服务器上预先生成的。

React 和 CSR 如何工作

因此，当我们加载一个 React 应用程序时，或者当它被安装后，我们在浏览器中检查源代码，我们会得到这样的东西：

React 源代码

如果你简化它，我们得到以下结果：


  
    
    
    
    
    
    
    
    Blogs by Cybernatico

如果你看一下用户界面中的输出，它将是这样的：

React 应用

在这个页面的源代码中，我们只得到几行代码，其中包括标题、 meta 标签和链接参考（link references）。

但在 body 中，我们只有以下内容：

那么，其余的代码在哪里呢？当页面加载时，我们在浏览器中看不到它。这是因为 React 使用客户端渲染（CSR）。React 应用程序在客户端处理 DOM，也就是在浏览器中。

每当我们加载一个 React 应用程序，所有的 UI 组件都会在浏览器上动态生成。

Next.js 和 SSR 如何工作？

如果你做了我们之前做的同样的事情，但用 Next.js 应用程序，你会得到不同的东西：



  
    
    Next.js Tutorial
    
    
    
    
    
  
  
    
      
        This is the Home Page!
        Go to the Profile Page of 1!

现在，这是一个简单的 Next.js 应用程序的源代码。我们看到整个内容，如 HTML、CSS 和 JavaScript。

这意味着，当 Next.js 应用程序加载时，我们在用户界面上看到的网络上的内容已经生成。而这是在服务器上发生的。这是因为 Next.js 利用了服务器端渲染（或 SSR），也被称为预渲染。

什么是 Pre-Rendering（预渲染）？

预渲染是服务器端渲染的一个例子，在浏览器上加载应用程序或网站之前，内容已经生成。

为什么使用 Pre-Rendering（预渲染）？

服务器端渲染（或预渲染）使应用程序的加载速度加快。这是因为我们将要看到的输出已经在服务器端生成。它不需要在浏览器上生成。这使得应用更快。

感谢阅读！

现在你应该知道 Next.js 和 React 的主要区别了。React 使用 CSR 或客户端渲染，其中 UI 元素是在浏览器上生成的。在 Next.js 中，用户界面来自服务器，提前生成。

如果你想开发电子商务、营销网站或简单的登陆页面等应用，你可以使用 Next.js。如果你想开发社交媒体应用程序或流媒体工具，如 Netflix 或 Youtube，你可以使用 React。

如果你想观看本博客的视频版本，你可以在这里找到它：Next.js 框架课程--Next.js 的预渲染(Pre-Rendering)。

如果你想进一步了解 Next.js，我正在建立一个关于它的课程。这是一个播放列表，你将在其中学习所有这些 Next.js 的东西。它仍在进行中。请看这里: https://youtube.com/playlist?list=PLWgH1O_994O_8Hg0-Q1xaD8ewXMx-fsBb

Next.js 完全手册

luojiyin — Wed, 08 Jun 2022 05:00:00 +0000

原文：The Next.js Handbook，作者：Flavio Copes

我写这个教程是为了帮助你快速学习 Next.js 并熟悉它的工作原理。

如果你对 Next.js 没有什么了解，过去使用过 React，并且希望更深入地了解 React 生态系统，特别是服务器端的渲染，那么这篇教程就非常适合你。

我发现 Next.js 是创建 Web 应用的一个很棒的工具，在这篇文章的最后，我希望你会像我一样对它感到兴奋。我也希望它能帮助你学习 Next.js！

注意：你可以下载本教程的 PDF/ePub/Mobi 版本，以便你可以离线阅读。

介绍

开发由 React 支持的现代 JavaScript 应用程序是一件非常棒的事情，直到你意识到有几个与在客户端渲染所有内容有关的问题。

首先，页面加载需要更长的时间才能对用户可见，因为在内容加载之前，所有的 JavaScript 必须加载，你的应用程序需要运行以确定在页面上显示什么。

第二，如果你正在创建一个公开的网站，你有一个内容搜索引擎优化（SEO）的问题。搜索引擎在运行和索引 JavaScript 应用程序方面越来越好，但如果我们能把内容发给它们，而不是让它们自己想办法解决，那就好得多。

解决这两个问题的方法是服务器渲染（server rendering），也叫静态预渲染（static pre-rendering）。

Next.js 是一个 React 框架，以一种非常简单的方式完成所有这些工作，但它并不限于此。它的创造者把它宣传为一个零配置（zero-configuration）、单指令（single-command）的 React 应用工具链。

它提供了一个通用的结构，使你能够轻松地构建一个前端的 React 应用程序，并透明地为你处理服务器端的渲染。

Next.js提供的主要功能

下面是一份 Next.js 不完全的主要功能的清单：

Hot Code Reloading（代码热加载）

Next.js 在检测到保存到磁盘的任何变化时，会重新加载页面。

Automatic Routing（自动路由）

任何 URL 都被映射到文件系统中，映射到放在 pages 文件夹中的文件，你不需要任何配置（当然你有自定义选项）。

Single File Components（单文件组件）

使用styled-jsx，完全集成在同一个团队中，为组件添加样式的范围是很简单的。

Server Rendering（服务器端渲染）

你可以在服务器端渲染 React 组件，然后再将 HTML 发送到客户端。

Ecosystem Compatibility（生态系统的兼容性）

Next.js 与 JavaScript、Node 和 React 生态系统的其他部分配合良好。

Automatic Code Splitting（自动代码拆分）

渲染页面时，只需使用它们需要的库和 JavaScript，而无需其他。Next.js 不会生成一个包含所有应用程序代码的单一 JavaScript 文件，而是将应用程序自动分解为几个不同的资源。

加载一个页面只加载该特定页面所需的 JavaScript。

Next.js 通过分析导入的资源来做到这一点。

例如，如果你只有一个页面导入了 Axios 库，那么这个特定的页面将在打包（bundle）的时候包含该库。

这可以确保你的第一个页面加载速度尽可能快，而且只有未来的页面加载（如果它们将被触发）才会向客户端发送所需的 JavaScript。

有一个值得注意的例外。如果经常使用的导入程序在网站页面中至少有一半被使用，它们就会被打包到主 JavaScript 中。

Prefetching（预取）

用于连接不同页面的 Link 组件支持 prefetch prop ，在后台自动预取页面资源（包括因代码分割而丢失的代码）。

Dynamic Components（动态组件）

你可以动态地导入 JavaScript 模块和 React 组件。

Static Exports（静态导出）

使用next export命令，Next.js 允许你从你的应用程序导出一个完全静态的网站。

TypeScript Support（支持 TypeScript）

Next.js 是用 TypeScript 编写的，因此，它具有出色的 TypeScript 支持。

Next.js vs Gatsby vs `create-react-app`

Next.js、Gatsby 和 create-react-app 是了不起的工具，我们可以用它们来驱动我们的应用程序。

让我们先说说它们的共同点。它们都有 React，为整个开发体验提供支持。它们还抽象了 webpack 和所有那些我们在过去的好日子里需要手动配置底层东西。

create-react-app 并不能帮助你轻松生成一个服务器端渲染的应用程序。任何与之相关的东西（SEO、速度...）都只能由 Next.js 和 Gatsby 等工具提供。

Next.js 什么时候比 Gatsby 好？

它们都可以帮助 服务器端渲染(server-side rendering)，但有两种不同的方式。

使用 Gatsby 的最终结果是一个静态网站生成器，没有服务器。你创建网站，然后将创建过程的结果静态地部署在 Netlify 或其他静态托管网站上。

Next.js 提供了一个可以在服务器端渲染响应请求的后端，允许你创建一个动态网站，这意味着你将把它部署在一个可以运行 Node.js 的平台上。

Next.js 也可以生成静态网站，但我不会说这是它的主要使用场景。

如果我的目标是创建一个静态网站，我将很难选择，Gatsby 可能有一个更好的插件生态系统，包括许多特别用于博客的插件。

Gatsby 在很大程度上也是基于 GraphQL，根据你的想法和需要，你可能真的喜欢或不喜欢。

如何安装Next.js

要安装 Next.js，你需要安装 Node.js。

确保你有最新版本的 Node。在终端运行 node -v 进行检查，并与 https://nodejs.org/ 上列出的最新 LTS 版本进行比较。

在你安装 Node.js 之后，你的命令行中就会有npm命令。

如果你在这个阶段有任何困难，我推荐你看我为你写的以下教程:

现在你有了 Node，更新到了最新版本，还有npm，我们已经准备好了!

我们现在可以选择两条路线：使用 create-next-app 或传统的方法，即手动安装和设置 Next 应用程序。

使用 create-next-app

如果你熟悉 create-react-app，create-next-app 也是一样的，只不过它创建的是一个 Next 应用，而不是 React 应用，正如其名字所暗示的。

我假设你已经安装了 Node.js，从 5.2 版本开始（写这篇文章的时候已经是 2 年多以前了），Node.js 捆绑了 npx命令。这个方便的工具可以让我们下载并执行一个 JavaScript 命令，我们将这样使用它:

npx create-next-app

该命令询问应用程序的名称（并以该名称为你创建一个新的文件夹），然后下载所有它需要的包（react，react-dom，next），将 package.json 设置为:

你可以通过运行 npm run dev 立即运行示例应用程序:

在下面看到 http://localhost:3000:

这是启动 Next.js 应用程序的推荐方法，因为它为你提供了结构和示例代码。不仅仅是默认的示例应用程序。您可以使用存储在 https://github.com/zeit/next.js/tree/canary/examples 中的任何示例 ) 使用 --example 选项。例如尝试:

npx create-next-app --example blog-starter

这给你提供了一个开箱即用的博客实例，而且还带有语法高亮:

手动创建一个 Next.js 应用程序

如果你想从头开始创建一个 Next 应用程序，你可以避免 create-next-app。方法是：在你喜欢的任何地方创建一个空文件夹，例如在你的主文件夹中，然后进入该文件夹:

mkdir nextjs
cd nextjs

并创建你的第一个 Next 项目目录:

mkdir firstproject
cd firstproject

现在使用npm命令将其初始化为一个 Node 项目:

npm init -y

-y选项告诉npm使用项目的默认设置，生成一个模板文件——package.json。

现在安装 Next 和 React:

npm install next react react-dom

你的项目文件夹现在应该有两个文件:

package.json (see my tutorial on it)
package-lock.json (see my tutorial on package-lock)

和 node_modules 文件夹。

用你喜欢的编辑器打开项目文件夹。我最喜欢的编辑器是 VS Code。如果你安装了该软件，你可以在终端运行 code，在编辑器中打开当前文件夹（如果该命令对你不起作用，请参见 this)

打开package.json 文件，它现在有这样的内容:

{
  "name": "firstproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies":  {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

并将 scripts 部分改为:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

来添加 Next.js 的构建命令，我们很快就会用到它。

提示：使用 "dev": "next -p 3001", 来改变端口，在本例中，运行在 3001 端口。

现在创建一个pages文件夹，并添加一个index.js文件。

在这个文件中，让我们创建我们的第一个 React 组件。

我们将使用它作为默认输出:

const Index = () => (
  
    Home page
  
)

export default Index

现在使用终端，运行 npm run dev 来启动 Next 开发服务器。

这将使应用程序在本地主机上的 3000 端口可用。

Open http://localhost:3000 in your browser to see it.

查看来源以确认SSR的工作

现在让我们检查一下这个应用程序是否按照我们期望的那样工作。这是一个 Next.js 应用程序，所以它应该是 服务器端渲染的(server side rendered)。

这是 Next.js 的主要卖点之一：如果我们使用 Next.js 创建一个网站，网站页面会在服务器上渲染，而服务器会将 HTML 传递给浏览器。

这有 3 个主要好处:

客户端不需要实例化 React 来渲染，这使得网站对你的用户来说更快。
搜索引擎会对页面进行索引，而不需要运行客户端的 JavaScript。谷歌开始解决这个问题（客户端渲染），但公开承认是一个较慢的过程（如果你想获得好的排名，你应该尽可能地帮助谷歌）。
你可以有社交媒体元标签，对添加预览图片，为你在 Facebook、Twitter 上分享的任何页面定制标题和描述都很有用。

让我们查看一下应用程序的源代码。
使用 Chrome 浏览器，你可以在页面的任何地方点击右键，然后按 查看网页源代源（View Page Source）。

如果你查看页面的源代码，你会看到 HTMLbody中的

`Home page`

片段，以及一堆 JavaScript 文件——程序打包出的。

我们不需要设置什么，SSR（服务器端渲染）已经在为我们工作了。

React 应用程序将在客户端启动，并将是一个使用客户端渲染来支持点击链接等交互的应用程序。但重新加载一个页面将从服务器上重新加载。而使用 Next.js，在浏览器中的结果应该是没有区别的——服务器渲染的页面看起来应该和客户端渲染的页面一模一样。

The app bundles

当我们查看页面源代码时，我们看到一堆 JavaScript 文件正在被加载:

让我们先把代码放在 HTML formatter 中，使代码格式化得更好，这样我们更好地理解它:

我们有 4 个 JavaScript 文件被声明要在 head 中预加载，使用
rel="preload" as="script":

/_next/static/development/pages/index.js (96 LOC)
/_next/static/development/pages/_app.js (5900 LOC)
/_next/static/runtime/webpack.js (939 LOC)
/_next/static/runtime/main.js (12k LOC)

这告诉浏览器在正常的渲染流程开始之前，尽快开始加载这些文件。如果没有这些，脚本的加载会有额外的延迟，这就提高了页面的加载性能。

然后这 4 个文件被加载到 body 的末尾，还有/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js（31k LOC），以及一个为页面数据设置一些默认值的 JSON 片段:

所加载的 4 个 bundle 文件已经实现了一个叫做代码分割(code splitting)的功能。index.js 文件提供了 index 组件所需的代码，它为/路由提供服务，如果我们有更多的页面，我们将为每个页面提供更多的 bundle，然后只有在需要时才会被加载——为页面提供一个更高性能的加载时间。

右下角的那个图标是什么？

你看到页面右下方那个像闪电的小图标了吗？

如果你把它悬停，它就会显示 "Prerendered Page"（预渲染的页面）:

这个图标当然只在 开发模式下可见，它告诉你这个页面符合自动静态优化的条件，这基本上意味着它不依赖于需要在调用时获取的数据，它可以在构建时（当我们运行npm run build时）预先渲染并构建为静态 HTML 文件。

下一步可以通过页面组件上没有 getInitialProps()方法来确定。

在这种情况下，我们的页面可以更快，因为它将被静态化的一个 HTML 文件提供，而不是通过 Node.js 服务器生成 HTML 输出。

另一个有用的图标可能会出现在它旁边，或者在非预渲染页面上代替它，是一个小的动画三角形:

这是一个编译指示器，当你保存一个页面，Next.js 正在编译应用程序，然后热代码重载启动，自动重新加载应用程序中的代码时，它就会出现。

这是一个非常好的方法，可以立即确定应用程序是否已经被编译，你可以测试你正在做的一部分。

安装React DevTools

Next.js 是基于 React 的，所以我们绝对需要安装一个非常有用的工具（如果你还没有），那就是 React 开发者工具（React Developer Tools）。

React 开发者工具同时适用于 Chrome 和 Firefox，它是你用来检查 React 应用程序的一个重要工具。

现在，React 开发者工具并不是专门针对 Next.js 的，但我想介绍一下，因为你可能对 React 提供的所有工具还不是 100%熟悉。与其假设你已经知道它们，不如去了解一下调试工具的情况。

他们提供了一个检查器，揭示了构建你的页面的 React 组件树，对于每个组件，你可以去检查 props、state、hooks，还有很多。

一旦你安装了 React 开发者工具，你可以打开常规的浏览器 devtools（在 Chrome 中，在页面上点击右键，然后点击Inspect），你会发现两个新的面板。Components 和 Profiler。

如果你把鼠标移到组件(components)上，你会看到，在页面中，浏览器会选择由该组件渲染的部分。

如果你选择树中的任何一个组件(components)，右边的面板就会显示对的**父组件(parent component)**的引用，以及传递给它的 props:

你可以通过点击组件(components)名称来轻松查找。

你可以点击开发工具工具栏中的 眼睛图标 来检查 DOM 元素，另外，如果你使用第一个图标，即带有鼠标图标的图标（它方便地位于类似的常规 DevTools 图标下），你可以在浏览器 UI 中悬停一个元素，直接选择渲染它的 React 组件。

你可以使用 bug 图标来记录一个组件的数据到控制台。

这非常棒，因为一旦你把数据打印出来，你可以右击任何元素，然后按 "Store as a global variable"(存储为全局变量)。例如，在这里我对url prop 做了这个操作，我能够使用分配给它的临时变量 temp1 在控制台中检查它。:

使用 Next.js 在开发模式下自动加载的 Source Maps，，我们可以在组件面板上点击<>代码，DevTools 将切换到 Source panel，向我们展示组件的源代码:

如果可能的话，Profiler 标签甚至更棒。它允许我们在应用程序中record an interaction(记录一个交互)，并看看会发生什么。我还不能展示一个例子，因为它需要至少 2 个组件来创建一个交互，而我们现在只有一个。我以后再谈这个问题。

我使用 Chrome 浏览器展示了所有的截图，但 React 开发工具在 Firefox 中的工作方式是一样的:

你可以使用的其他调试技术

除了 React 开发者工具（这是构建 Next.js 应用程序所必需的）之外，我想强调调试 Next.js 应用程序的 2 种方法。

第一个显然是console.log()和所有其他 Console API工具。Next 应用程序的工作方式会使日志语句在浏览器控制台或在你使用npm run dev启动 Next 的终端中发挥作用。

特别是，如果页面从服务器上加载，当你把 URL 指向它，或者你点击刷新按钮/cmd/ctrl-R，任何控制台日志都会在终端发打印。

随后通过点击鼠标发生的页面转换将使所有的控制台记录发生在浏览器内。

如果你对缺失的日志记录感到惊讶，请记住。

另一个必不可少的工具是 debugger 语句。将此语句添加到一个组件中，将暂停浏览器渲染页面。:

真的很厉害，因为现在你可以使用浏览器调试器来检查数值，并逐行运行你的应用程序。

你也可以使用 VS 代码调试器来调试服务器端的代码。我提到这个技术和这个教程来设置这个。

在网站上添加第二页

现在我们已经很好地掌握了可以用来帮助我们开发 Next.js 应用程序的工具，让我们从我们的第一个应用程序的基础上继续前进吧:

我想给这个网站添加第二个页面，一个博客。它将被送入/blog，目前它只包含一个简单的静态页面，就像我们的第一个index.js组件（组件）一样:

保存新文件后，已经运行的npm run dev进程已经能够渲染页面，不需要再重新启动。

当我们点击 URL http://localhost:3000/blog，我们就有了新的页面:

以下是终端告诉我们的情况:

现在，URL 是/blog这一事实只取决于文件名，以及它在pages文件夹下的位置。

你可以创建一个pages/hey/ho页面，该页面将显示在 URL http://localhost:3000/hey/ho上。

对于 URL 的目的来说，文件中的组件名称并不重要。

试着去查看页面的源代码，当从服务器加载时，它会列出/_next/static/development/pages/blog.js作为加载的包（bundle）之一，而不是像主页那样列出/_next/static/development/pages/index.js。这是因为由于自动代码拆分，我们不需要为主页服务的 bundle。只需要服务于博客页面的 bundle。

我们也可以直接从blog.js导出一个匿名函数:

export default () => (
  
    Blog
  
)

或者如果你喜欢非箭头的函数语法:

export default function() {
  return (
    
      Blog
    
  )
}

链接这两个页面

现在我们有两个页面，分别由index.js和blog.js定义，我们可以引入链接。

页面内的普通 HTML 链接使用 a 标签完成:

Blog

我们不能在 Next.js 中这样做。

为什么？当然，我们在技术上是 可以的，因为这是网络，而且在网络上，事情永远不会中断（这就是为什么我们仍然可以使用标签。但是，使用 Next 的主要好处之一是，一旦一个页面被加载，由于客户端的渲染，过渡到其他页面的速度非常快。如果你使用一个普通的a链接: const Index = () => ( Home page Blog ) export default Index 现在打开 DevTools，特别是 Network panel。第一次加载http://localhost:3000/时，我们得到了所有加载的页面 bundles: 现在，如果你点击 "Preserve log" 按钮（以避免清除网络面板），并点击 "Blog" 链接，就会发生这种情况: 我们又从服务器上得到了所有的 JavaScript! 但是...如果我们已经得到了所有的 JavaScript，我们就不需要这些了。我们只需要blog.js页面 bundle，这是唯一一个新的页面。为了解决这个问题，我们使用 Next 提供的一个组件，叫做 Link。我们导入它: import Link from 'next/link' 然后我们用它来包住（warp）我们的链接，像这样: import Link from 'next/link' const Index = () => ( Home page Blog ) export default Index 现在，如果你重试我们之前做的事情，你将能够看到，当我们移动到博客页面时，只有blog.js bundle 被加载。: 而且页面的加载速度比以前快了很多，浏览器通常在标签上的旋转器甚至都没有出现。然而网址却变了，你可以看到。这是与浏览器历史 API的无缝工作。这就是客户端渲染的作用。如果你现在按下后退按钮呢？没有什么被加载，因为浏览器仍然有旧的index.js bundle，准备加载/index路由。这都是自动的! 路由与动态内容在上一章中，我们看到了如何将主页(index)链接到博客(blog)页面。博客是 Next.js 的一个很好的用例，在本章中我们将通过添加博客文章来继续探索。博客文章有一个动态的 URL。例如，一篇题为 "Hello World "的文章的 URL 是/blog/hello-world。一篇题为 "我的第二篇文章 "的文章的 URL 是/blog/my-second-post。这些内容是动态的，可能取自数据库、markdown 文件或更多。 Next.js 可以根据一个**dynamic URL(动态 URL)**来提供动态内容。我们通过使用[]语法创建一个动态页面来创建一个动态 URL。如何创建？我们添加一个pages/blog/[id].js文件。这个文件将处理/blog/路径下的所有动态 URL，比如我们上面提到的那些。/blog/hello-world, /blog/my-second-post等等。在文件名中，方括号内的[id]意味着任何动态的东西都将被放在 **路由的查询属性（query property）**的id参数中。好吧，这一次的事情有点多了。什么是路由（router）？路由(router)是 Next.js 提供的一个库。我们从 next/router 导入它: import { useRouter } from 'next/router' 而一旦我们有了useRouter，我们就用useRouter来实例化路由对象： const router = useRouter() 一旦我们有了这个路由对象，我们就可以从中提取信息。特别是我们可以通过访问router.query.id来获得[id].js文件中 URL 的动态部分。动态部分也可以只是 URL 的一部分，如post-[id].js。所以让我们继续在实践中应用所有这些东西。创建文件pages/blog/[id].js: import { useRouter } from 'next/router' export default () => { const router = useRouter() return ( <> Blog post Post id: {router.query.id} ) } 现在，如果你去http://localhost:3000/blog/test路由，你应该看到这个：我们可以使用这个 id 参数，从一个帖子列表中收集帖子。比如说，从一个数据库中。为了简单起见，我们将在项目根目录下添加一个posts.json文件： { "test": { "title": "test post", "content": "Hey some post content" }, "second": { "title": "second post", "content": "Hey this is the second post content" } } 现在我们可以导入它，并从id键中查找帖子： import { useRouter } from 'next/router' import posts from '../../posts.json' export default () => { const router = useRouter() const post = posts[router.query.id] return ( <> {post.title} {post.content} ) } 重新加载页面应该会显示这个结果：但事实并非如此! 相反，我们在控制台得到一个错误，在浏览器中也得到一个错误：为什么？因为在渲染过程中，当组件被初始化时，数据还不在那里。我们将在下一课看到如何用 getInitialProps 向组件提供数据。现在，在返回 JSX 之前添加一个小的if (!post) return 进行检查： import { useRouter } from 'next/router' import posts from '../../posts.json' export default () => { const router = useRouter() const post = posts[router.query.id] if (!post) return return ( <> {post.title} {post.content} ) } 现在，事情应该工作了。最初，该组件的渲染没有动态的router.query.id信息。渲染后，Next.js 触发了查询值的更新，页面显示了正确的信息。如果你查看源代码，在 HTML 中会有一个空的标签：我们很快就会解决这个问题，它不能实现 SSR，这既损害了用户的加载时间，也损害了 SEO 和社交分享，我们已经讨论过了。我们可以通过在pages/blog.js中列出这些帖子来完成博客的例子： import posts from '../posts.json' const Blog = () => ( Blog {Object.entries(posts).map((value, index) => { return {value[1].title} })} ) export default Blog 我们可以通过从next/link中导入Link并在帖子循环中使用它，将它们链接到各个帖子页面： import Link from 'next/link' import posts from '../posts.json' const Blog = () => ( Blog {Object.entries(posts).map((value, index) => { return ( {value[1].title} ) })} ) export default Blog Prefetching 我之前提到过 Next.js Link 组件可以用来创建 2 个页面之间的链接，当你使用它时，Next.js 会透明地为我们处理前端路由，所以当用户点击一个链接时，前端会负责显示新的页面，而不会像通常网页那样触发新的客户/服务器请求和响应周期。当你使用 Link 时，Next.js 还为你做了一件事。只要被包裹的元素出现在视口（viewport）中（这意味着网站用户可以看到它），Next.js 就会预取(prefetch)它所指向的 URL，只要它是一个本地链接（在你的网站上），就会使应用程序对浏览者来说超级快速。这种行为只在生产模式（production mode）下被触发（我们稍后会深入讨论这个问题），这意味着如果你用npm run dev运行应用程序，你必须停止它，用npm run build编译你的生产包，用npm run start运行它。使用 DevTools 中的 Network inspector，你会注意到在页面加载时，任何在折叠上方的链接都会在你的页面上触发load事件（当页面完全加载时触发，发生在DOMContentLoaded事件之后）时开始预取（prefetch）。任何不在视口（viewport）中的其他链接标签将被预取（prefetch），当用户滚动时，它将被预取（prefetch）。预取在高速连接（Wifi 和 3g 以上连接）上是自动的，除非浏览器发送 Save-Data HTTP Header。你可以通过设置 prefetch prop 为 false来选择不预取单个 Link 实例： A link 使用路由器来检测活动链接在处理链接时，一个非常重要的功能是确定什么是当前的 URL，特别是给活动链接分配一个类别，这样我们就可以使它的样式与其他的不同。例如，这在你的网站标题中特别有用。 Next.js 在next/link中提供的Link组件默认并不自动为我们做这些。我们可以自己创建一个 Link 组件，并将其存储在 Components 文件夹下的Link.js文件中，然后导入该组件，而不是默认的next/link。在这个组件中，我们首先从react导入 React，从next/link导入 Link，从next/router导入useRouter hook。在组件内部，我们确定当前的路径名称是否与组件的href prop 相匹配，如果是，我们将 selected 类追加到子节点(children)上。最后，我们使用React.cloneElement() 返回带有更新后的类的子节点（children）： import React from 'react' import Link from 'next/link' import { useRouter } from 'next/router' export default ({ href, children }) => { const router = useRouter() let className = children.props.className || '' if (router.pathname === href) { className = `${className} selected` } return {React.cloneElement(children, { className })} } 使用 next/router 我们已经看到了如何使用 Link 组件来声明式地处理 Next.js 应用程序中的路由。在 JSX 中管理路由真的很方便，但有时你需要以编程方式触发路由变化。在这种情况下，你可以直接访问 Next.js Router，在next/router包中提供，并调用其push()方法。下面是一个访问路由的例子： import { useRouter } from 'next/router' export default () => { const router = useRouter() //... } 一旦我们通过调用useRouter()得到路由对象，我们就可以使用它的方法。这是客户端的路由，所以方法应该只在面向前端的代码中使用。确保这一点的最简单方法是在useEffect()React hook 中调用，或在componentDidMount()中调用 React 有状态组件。你可能最常使用的是push()和prefetch()。 push()允许我们在前端以编程方式触发 URL 变化： router.push('/login') prefetch()允许我们以编程方式预取（prefetch）一个 URL，当我们没有自动处理预取的Link标签时很有用： router.prefetch('/login') Full example: import { useRouter } from 'next/router' export default () => { const router = useRouter() useEffect(() => { router.prefetch('/login') }) } 你也可以使用路由来监听路由变更事件。使用 getInitialProps() 向组件提供数据在上一章中，我们在动态生成帖子页面时遇到了一个问题，因为该组件需要一些前期的数据，我们试图从 JSON 文件中获取数据时： import { useRouter } from 'next/router' import posts from '../../posts.json' export default () => { const router = useRouter() const post = posts[router.query.id] return ( <> {post.title} {post.content} ) } 我们得到了这个错误：我们如何解决这个问题？我们又如何使 SSR 工作于动态路由？我们必须为组件提供 props，使用一个名为 getInitialProps() 的特殊函数，它被附加到组件上要做到这一点，首先我们要为该组件命名： const Post = () => { //... } export default Post then we add the function to it: const Post = () => { //... } Post.getInitialProps = () => { //... } export default Post 这个函数得到一个对象作为其参数，其中包含几个属性。特别是，我们现在感兴趣的是，我们得到query对象，也就是我们之前用来得到帖子 id 的对象。所以我们可以用对象析构(object destructuring) 的语法来获得它： Post.getInitialProps = ({ query }) => { //... } 现在我们可以从这个函数中返回帖子(post)： Post.getInitialProps = ({ query }) => { return { post: posts[query.id] } } 我们也可以删除 useRouter 的导入，我们从传递给Post 组件的props属性中获得帖子(post)： import posts from '../../posts.json' const Post = props => { return ( {props.post.title} {props.post.content} ) } Post.getInitialProps = ({ query }) => { return { post: posts[query.id] } } export default Post 现在不会有错误了，而且 SSR 会像预期的那样工作，你可以看到查看源代码： getInitialProps函数将在服务器端执行，但也会在客户端执行，当我们使用Link组件导航到一个新页面时，就像我们所做的那样。值得注意的是，getInitialProps 在它收到的上下文对象(context object )中，除了query对象外，还得到了其他的属性： pathname: URL 的 path 部分 asPath - 浏览器中显示的实际路径（包括查询 query）的字符串在调用http://localhost:3000/blog/test的情况下，将分别导致： /blog/[id] /blog/test 而在服务器端渲染的情况下，它也将收到： req: HTTP request 对象 res: HTTP response 对象 err: error 对象如果你做过任何 Node.js 编码，req和res将是你熟悉的。 CSS 我们如何在 Next.js 中设计 React 组件的样式？我们有很大的自由度，因为我们可以使用任何我们喜欢的库。但 Next.js 内置了styled-jsx，因为那是由维护 Next.js 的人创建的一个库。这是一个很酷的库，它为我们提供了范围广泛的 CSS，这对可维护性非常好，因为 CSS 只影响它所应用的组件。我认为这是一个写 CSS 的好方法，不需要应用额外的库或预处理器来增加复杂性。要在 Next.js 中为 React 组件添加 CSS，我们要在 JSX 的一个片段中插入它，该片段以在这个奇怪的块中，我们写了普通的 CSS，就像我们在.css文件中做的那样：你把它写在 JSX 里面，像这样: const Index = () => ( Home page ) export default Index 在块内，我们可以使用插值来动态地改变数值。例如，这里我们假设一个 size prop 由父组件传递，我们在 styled-jsx 块中使用它： const Index = props => ( Home page ) 如果你想在全局范围内应用一些 CSS，而不是局限于某个组件，你可以在style标签上添加global关键字：如果你想在 Next.js 组件中导入一个外部 CSS 文件，你必须先安装@zeit/next-css： npm install @zeit/next-css 然后在项目的根部创建一个配置文件，名为next.config.js，内容如下: const withCSS = require('@zeit/next-css') module.exports = withCSS() 重新启动 Next 应用程序后，你现在可以像通常使用 JavaScript 库或组件那样导入 CSS: import '../style.css' 你也可以直接导入一个 SASS 文件，用@zeit/next-sass库。用自定义标签填充head标签从任何 Next.js 页面组件中，你都可以向页面标题添加信息。这在以下情况下是很方便的: 你想定制页面的标题你想改变一个元(meta)标签你怎么能这样做呢？在每个组件内，你可以从 next/head 导入 Head 组件，并将其包含在你的组件 JSX 输出中： import Head from 'next/head' const House = props => ( The page title {/* the rest of the JSX */} ) export default House 你可以在页面的部分添加任何你想出现的 HTML 标签。当安装该组件时，Next.js 将确保Head内的标签被添加到页面的标题中。当卸载组件时，Next.js 将负责删除这些标签。添加一个封装组件你网站上的所有页面看起来都差不多。有一个 chrome 窗口，一个共同的基础层，你只是想改变里面的内容。有一个导航栏，一个侧边栏，然后是实际内容。你如何在 Next.js 中创建这样的系统？有 2 种方法。一种是使用高阶组件，通过创建一个components/Layout.js组件： export default Page => { return () => ( .... ) } 在那里，我们可以为标题和/或侧边栏导入单独的组件，我们还可以添加我们需要的所有 CSS。你可以在每一个页面中像这样使用它: import withLayout from '../components/Layout.js' const Page = () => Here's a page! export default withLayout(Page) 但我发现这只适用于简单的情况，你不需要在一个页面上调用getInitialProps()。为什么？因为getInitialProps()只在页面组件上被调用。但是如果我们从一个页面导出高阶组件 withLayout()，Page.getInitialProps()就不会被调用。但 withLayout.getInitialProps()会。为了避免不必要地使我们的代码库复杂化，另一种方法是使用 props： export default props => ( .... {props.content} ) 而在我们的页面中，我们现在这样使用它: import Layout from '../components/Layout.js' const Page = () => ( Here's a page! )} /> ) 这种方法让我们在页面组件中使用getInitialProps()，唯一的缺点是必须在contentprop 中写入组件的 JSX: import Layout from '../components/Layout.js' const Page = () => ( Here's a page! )} /> ) Page.getInitialProps = ({ query }) => { //... } API Routes 除了创建页面路由（page routes），也就是将页面作为网页提供给浏览器之外，Next.js 还可以创建 API 路由（API routes）。这是一个非常有趣的功能，因为它意味着 Next.js 可以用来创建一个由 Next.js 本身存储和检索的数据的前端，通过 fetch 请求传输 JSON。 API 路由位于/pages/api/文件夹下，并被映射到/api端点（endpoint）。这个功能在创建应用程序时非常有用。在这些路由中，我们编写 Node.js 代码（而不是 React 代码）。这是一个范式的转变，你从前端移到后端，但非常无缝。假设你有一个/pages/api/comments.js文件，其目标是以 JSON 格式返回一篇博客文章的评论。假设你有一个存储在comments.json文件中的评论列表： [ { "comment": "First" }, { "comment": "Nice post" } ] 下面是一个示例代码，它向客户返回评论的列表: import comments from './comments.json' export default (req, res) => { res.status(200).json(comments) } 它将监听/api/comments URL 的 GET 请求，你可以尝试用浏览器调用它： API 路由也可以像页面一样使用动态路由，使用[]语法来创建动态 API 路由，如/pages/api/comments/[id].js，它将检索特定于帖子 id 的评论。在[id].js中，你可以通过在req.query对象中查找来检索id值： import comments from '../comments.json' export default (req, res) => { res.status(200).json({ post: req.query.id, comments }) } 在这里你可以看到上述代码的运行情况：在动态页面中，你需要从next/router中导入useRouter，然后使用const router = useRouter()获得路由对象，然后我们就可以使用router.query.id获得id值。在服务器端，这一切都很容易，因为查询是附在请求对象上的。如果你做一个 POST 请求，所有的工作方式都是一样的——都是通过那个默认的出口。要把 POST 从 GET 和其他 HTTP 方法（PUT、DELETE）中分离出来，可以查询req.method值： export default (req, res) => { switch (req.method) { case 'GET': //... break case 'POST': //... break default: res.status(405).end() //Method Not Allowed break } } 除了我们已经看到的req.query和req.method之外，我们还可以通过引用req.cookies，即req.body中的请求体来访问 cookies。从更底层角度来讲，这一切都由Micro提供动力，这是一个支持异步 HTTP 微服务的库，由 Next.js 团队开发维护。你可以在我们的 API 路由中使用任何 Micro 中间件来增加更多的功能。在服务器端，或在客户端运行代码在你的页面组件中，你可以通过检查window属性，判断在服务器端或在客户端执行代码。这个属性只存在于浏览器内部，所以你可以检查 if (typeof window === 'undefined') { } 并在该块中添加服务器端的代码。同样地，你可以通过检查来是否可以执行客户端代码 if (typeof window !== 'undefined') { } JS 提示。我们在这里使用typeof操作符，因为我们无法通过其他方式检测一个未定义的值。我们不能做if (window == undefined)，因为我们会得到一个 "window is not defined" 的运行时错误。 Next.js，作为构建时的优化，也从 bundles 中删除了使用这些检查的代码。客户端 bundle 将不包括包裹在if (typeof window === 'undefined') {}块中的内容。部署生产版本在教程中，部署应用程序总是被放在最后。在这里，我想提前介绍一下，因为部署 Next.js 应用非常容易，我们现在就可以深入研究，然后再继续研究其他更复杂的话题。记得在 "如何安装 Next.js "一章中，我告诉你要在package.json的script部分添加这 3 行： "scripts": { "dev": "next", "build": "next build", "start": "next start" } 到目前为止，我们使用npm run dev来调用安装在本地的node_modules/next/dist/bin/next中的next命令。这启动了开发服务器，它为我们提供了source maps和hot code reloading这两个在调试时非常有用的功能。同样的命令可以通过运行 npm run build来创建网站，并加上 build 标志。然后，同样的命令可以用来启动生产应用程序，通过运行 npm run start 来传递 start 标志。这两个命令是我们必须调用的，以成功地在本地部署我们网站的生产版本。生产版本是高度优化的，没有 source maps和其他诸如 hot code reloading 的东西，这对我们的终端用户没有好处。所以，让我们创建一个生产版的应用程序。用以下方法创建它： npm run build 命令的输出告诉我们，一些路由（/和/blog现在被预设为静态 HTML，而/blog/[id]将由 Node.js 后端提供。然后你可以运行npm run start来启动本地的生产服务器。 npm run start 访问http://localhost:3000将向我们展示应用程序的生产版本，在本地。部署在 Now 在上一章中，我们在本地部署了 Next.js 应用程序。我们如何将其部署到真正的网络服务器上，以便其他人能够访问它呢？部署 Next 应用程序最简单的方法之一是通过Zeit创建的Now平台，该公司正是创建开源项目 Next.js 的公司。你可以使用 Now 来部署 Node.js 应用程序、静态网站等。现在使应用程序的部署和分发步骤变得非常、非常简单和快速，除了 Node.js 应用程序外，他们还支持部署 Go、PHP、Python 和其他语言。你可以把它看作是 "云"，因为你并不真正知道你的应用程序将被部署在哪里，但你知道你将有一个可以到达的 URL。现在开始使用是免费的，有慷慨的免费计划，目前包括 100GB 的主机，每天 1000 次无服务器函数调用，每月 1000 次构建，每月 100GB 的带宽，以及一个CDN位置。如果你需要更多，定价页有助于了解成本。开始使用 Now 的最好方法是使用官方 Now CLI： npm install -g now 一旦有了这个命令，运行 now login 而应用程序将要求你提供你的电子邮件。如果你还没有注册，请在继续之前在https://zeit.co/signup上创建一个账户，然后将你的电子邮件添加到 CLI 客户端。一旦完成这些，从 Next.js 项目根目录下运行 now 而该应用程序将被立即部署到 Now 云中，你将得到独特的应用程序 URL：一旦你运行now程序，应用程序就会被部署到now.sh域下的一个随机 URL。我们可以在图片中给出的输出中看到 3 个不同的 URL https://firstproject-2pv7khwwr.now.sh https://firstproject-sepia-ten.now.sh https://firstproject.flaviocopes.now.sh 为什么有这么多？首先是识别部署的 URL。每次我们部署应用程序时，这个 URL 都会改变。你可以通过改变项目代码中的某些内容，并再次运行 now 来立即测试：其他 2 个 URL 将不会改变。第一个是随机的，第二个是你的项目名称（默认为当前项目文件夹，你的账户名，然后是now.sh。如果你访问这个 URL，你会看到应用被部署到生产中。你可以将 Now 配置为将网站提供给你自己的自定义域或子域，但我现在不会深入研究这个。 now.sh子域对于我们的测试目的已经足够了。分析应用程序bundles的情况下一步为我们提供了一种分析生成的 bundles 的方法。打开应用程序的 package.json 文件，在 scripts 部分添加这 3 个新命令： "analyze": "cross-env ANALYZE=true next build", "analyze:server": "cross-env BUNDLE_ANALYZE=server next build", "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build" Like this: { "name": "firstproject", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build", "start": "next start", "analyze": "cross-env ANALYZE=true next build", "analyze:server": "cross-env BUNDLE_ANALYZE=server next build", "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "next": "^9.1.2", "react": "^16.11.0", "react-dom": "^16.11.0" } } 然后安装这两个软件包: npm install --dev cross-env @next/bundle-analyzer 在项目根部创建一个next.config.js文件，其内容如下: const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' }) module.exports = withBundleAnalyzer({}) 现在运行命令 npm run analyze 这应该在浏览器中打开两个页面。一个用于客户端捆绑包，另一个用于服务器端捆绑包：这非常有用。您可以检查捆绑包中占用最多空间的内容，还可以使用侧边栏排除捆绑包，以更轻松地可视化较小的捆绑包：模块懒加载能够直观地分析一个 bundle 是非常好的，因为我们可以非常容易地优化我们的应用程序。假设我们需要在我们的博客文章中加载 Moment 库，运行： npm install moment 将其导入项目中。现在让我们模拟一下，我们在两个不同的路由上需要它。/blog和/blog/[id]。我们在pages/blog/[id].js中导入它： import moment from 'moment' ... const Post = props => { return ( {props.post.title} Published on {moment().format('dddd D MMMM YYYY')} {props.post.content} ) } 我只是加入今天的日期，作为一个例子。这将包括 Moment.js 在博文页面的 bundle，你可以通过运行npm run analyze看到：看，我们现在在/blog/[id]里有一个红色的条目，就是我们添加 Moment.js 的那个路由！它从 1kB 变成了 350kB，相当大的变化。而这是因为 Moment.js 库本身就是 349kB。客户端 bundles 的可视化显示，更大的是页面 bundles，而之前是很少的。而它 99%的代码都是 Moment.js。每当我们加载一篇博客文章时，我们就会把所有这些代码转移到客户端。这并不理想。一个解决方法是寻找一个体积更小的库，因为 Moment.js 并不以轻量级著称（尤其是开箱后包含了所有的地域性），但为了这个例子，我们假设我们必须使用它。我们可以做的是将所有的 Moment 代码分离在一个独立的 bundle 里。怎么做？我们在getInitialProps里面进行异步导入，而不是在组件层面上导入 Moment，我们计算出要发送给组件的值。记住，我们不能在getInitialProps()返回的对象中返回复杂的对象，所以我们在里面计算出日期： import posts from '../../posts.json' const Post = props => { return ( {props.post.title} Published on {props.date} {props.post.content} ) } Post.getInitialProps = async ({ query }) => { const moment = (await import('moment')).default() return { date: moment.format('dddd D MMMM YYYY'), post: posts[query.id] } } export default Post 看到在 “await import” 之后对 “.default()” 的特殊调用吗？它需要在动态导入中引用默认导出（见https://v8.dev/features/dynamic-import）。现在，如果我们再次运行npm run analyze，我们可以看到这个：我们的/blog/[id]捆绑文件又非常小了，因为 Moment 已经被移到它自己的捆绑文件中，由浏览器单独加载。今后的发展方向关于 Next.js，还有很多东西需要了解。我没有谈及用登录管理用户会话、无服务器、管理数据库等等。本手册的目的不是要教你所有的东西，而是要逐步向你介绍 Next.js 的所有功能。我建议的下一步是仔细阅读Next.js 官方文档，以了解我没有谈到的所有特性和功能，并看看Next.js 插件引入的所有额外功能，其中有些功能相当惊人。你可以在 Twitter @flaviocopes上找到我。还可以查看我的网站，flaviocopes.com。注意：你可以下载本教程的 PDF/ePub/Mobi 版本，以便你可以离线阅读。 Next.js 图像处理教程——如何上传、裁剪和调整浏览器中的图像大小 Jing Wu — Sat, 04 Jun 2022 03:30:00 +0000 原文：Next.js Image Tutorial – How to Upload, Crop, and Resize Images in the Browser in Next，作者：Idris Olubisi 两个最基本的图像编辑功能是调整大小和裁剪。但是你应该谨慎执行这些操作，因为它们可能会降低图像质量。裁剪总是会删除原始图像的一部分，从而导致一些像素的丢失。这篇文章将教你如何在浏览器中上传、裁剪和调整图像大小。我在 Codesandbox 中构建了这个项目。要快速开始的话，请下载 Codesandbox 并运行项目。先决条件要跟上本教程，你应该有一些 JavaScript 和 React.js 经验。对 Next.js 的经验不是必须的，但有这个经验也不错。你还需要一个 Cloudinary account 帐户来存储媒体文件。 Cloudinary 提供了一个安全且完整的 API，用于快速和有效地从服务器、浏览器或移动应用程序上传媒体文件。最后你需要 Next.js 。它是一个基于 React 的开源前端开发 Web 框架，允许服务端渲染和生成静态网站和应用。项目设置和安装使用 npx create-next-app 命令在你选择的目录中创建一个新项目。你可以使用以下命令执行此操作： npx create-next-app 要安装这些依赖项，请使用这些命令： cd npm install cloudinary-react 在该应用程序创建并安装完依赖项后，你会看到一条信息，其中有关于导航到你的网站并在本地运行的说明。你可以使用以下命令执行此操作： npm run dev Next.js 将启动一个默认可访问的热重载开发环境 http://localhost:3000 。如何构建用户界面在我们的项目中，我们希望能够在主页的用户界面上上传、裁剪和调整图像大小。我们将通过更新 pages/index.js 文件为组件来做到这一点： import React, { useState } from "react"; import Head from "next/head"; const IndexPage = () => { return ( <> How to Crop, Resize & Upload Image in the Browser using Cloudinary Transformation Resize Options Image will appear here ); }; export default IndexPage; 不过，当前的用户界面看起来并不那么好。我们将在 style.css 文件中添加一些 CSS 样式，如下所示： @import url("https://fonts.googleapis.com/css?family=Acme|Lobster"); /* 这使我能够拥有整个页面的宽度，而没有最初的 padding/margin。 */ body, html { margin: 0; padding: 0; height: 100%; width: 100%; font-family: Acme; min-width: 700px; } .splitdiv { height: 100%; width: 50%; } /* 这一部分包含了屏幕左侧的所有内容 */ /* ----------------------------------------- */ #leftdiv { float: left; background-color: #fafafa; height: 932px; } #leftdivcard { margin: 0 auto; width: 50%; background-color: white; margin-top: 25vh; transform: translateY(-50%); box-shadow: 10px 10px 1px 0px rgba(78, 205, 196, 0.2); border-radius: 10px; } #leftbutton { background-color: #512cf3; border-radius: 5px; color: #fafafa; margin-left: 350px; } /* ----------------------------------------- */ /* 这一部分包含了屏幕右侧的所有内容 */ /* ----------------------------------------- */ #rightdiv { float: right; background-color: #cbcfcf; height: 932px; } #rightdivcard { margin: 0 auto; width: 50%; margin-top: 50vh; transform: translateY(-50%); background-position: bottom; background-size: 20px 2px; background-repeat: repeat-x; } /* ----------------------------------------- */ /* 基础样式 */ /* ----------------------------------------- */ button { outline: none !important; font-family: Lobster; margin-bottom: 15px; border: none; font-size: 20px; padding: 8px; padding-left: 20px; padding-right: 20px; margin-top: -15px; cursor: pointer; } h1 { font-family: Lobster; color: #512cf3; text-align: center; font-size: 40px; } input { font-family: Acme; font-size: 16px; font-family: 15px; } input { width: 30%; height: 20px; padding: 16px; margin-left: 1%; margin-right: 2%; margin-top: 15px; margin-bottom: 10px; display: inline-block; border: none; } input:focus { outline: none !important; border: 1px solid #512cf3; box-shadow: 0 0 1px round #719ece; } /* ----------------------------------------- */ .main { height: 100%; width: 100%; display: inline-block; } .main-h2 { padding-top: 20px; text-align: center; } .body-h1 { padding-top: 20px; text-align: center; color: white; } .inner-p { color: white; text-align: center; } .main-align { text-align: center; } .form-control { margin-left: 15px; } 我们的应用程序现在应该看起来如 http://localhost:3000/ 上所呈现出来那样：如何创建图像上传小部件 Cloudinary 的上传小部件让我们可以从多个来源上传媒体资源，包括 Dropbox、Facebook、Instagram 和直接从我们设备相机拍摄的图像。我们将在这个项目中使用这个上传小部件。创建一个免费的 cloudinary 帐户, 获取你的云账户名称（cloud name）和上传预设（upload_presets）。 upload_presets 允许我们集中定义一组资源上传选项，而不是在每次上传调用中去提供它们。Cloudinary 中的 cloud name是与你的 Cloudinary 帐户关联的唯一标识符。首先，我们通过内容分发网络（CDN）将 Cloudinary 小部件的 JavaScript 文件添加到位于 pages/index.js 中的 index.js中。并且使用 next/head 中的文件去包裹所有 meta 标签，这使我们可以将数据添加到 React 中 HTML 文档的 Head 部分。接下来，在 pages/index.js 文件中，我们从 next/head 导入 Head 组件并添加脚本文件。 import React, { useState } from "react"; import Head from "next/head"; const IndexPage = () => { return ( <> How to Crop and Resize Image in the Browser [...] ); }; export default IndexPage; 在 pages/index.js 文件中，我们将在点击按钮时触发的方法中创建一个小部件的实例，以及一个状态变量 imagePublicId 。 import React, { useState } from "react"; import Head from "next/head"; const IndexPage = () => { const [imagePublicId, setImagePublicId] = useState(""); const openWidget = () => { // create the widget const widget = window.cloudinary.createUploadWidget( { cloudName: "olanetsoft", uploadPreset: "w42epls7" }, (error, result) => { if ( result.event === "success" && result.info.resource_type === "image" ) { console.log(result.info); setImagePublicId(result.info.public_id); } } ); widget.open(); // open up the widget after creation }; return ( <> //... ); }; export default IndexPage; 该小部件需要我们的 Cloudinary 的 cloud_name 和 uploadPreset。该 createWidget() 函数会创建一个新的上传小部件。成功上传图像后，我们将资产的 public_id 分配给相关的状态变量。要获得我们的 cloudname 和 uploadPreset, 我们需要按照以下步骤操作：你可以从 Cloudinary 的仪表板获取 cloudName，如下所示。你可以在 Cloudinary 设置页面的 Upload 选项卡中找到 upload_preset。你可以通过点击仪表板页面右上角的齿轮图标来访问它。向下滚动到页面底部的上传预设部分，你将在其中看到你的 upload_presets ，或者如果你没有任何预设，可以选择创建一个。我们将继续在我们的图片上传按钮的 onClick 处理程序中调用 openWidget 函数，如下所示： //... const IndexPage = () => { //... return ( <> //.... //... Resize Options //... Image will appear here ); }; export default IndexPage; 当我们在浏览器中打开我们的应用程序并单击 Upload Image 按钮时，我们应该会看到如下内容：如何实现自定义转换功能我们需要创建一个组件, 根据传递给它的 props 属性来处理转换。我们将在根文件夹中创建一个 components/ 目录。在该目录下，我们将创建一个名为 image.js 的文件，内容如下： import { CloudinaryContext, Transformation, Image } from "cloudinary-react"; const TransformImage = ({ crop, image, width, height }) => { return ( ); }; export default TransformImage; 在上面的代码片段中，我们导入了 CloudinaryContext，这是一个包装 Cloudinary 组件，用于管理其所有子 Cloudinary 组件之间的共享信息。渲染的 TransformImage 组件将图像转换的数据作为 props 属性。当我们将其导入到 pages/index.js 时，上面的代码块会渲染上传的图片： //... import TransformImage from "../components/image"; const IndexPage = () => { const [imagePublicId, setImagePublicId] = useState(""); const [alt, setAlt] = useState(""); const [crop, setCrop] = useState("scale"); const [height, setHeight] = useState(200); const [width, setWidth] = useState(200); return ( <> //... //... Image will appear here {imagePublicId ? ( ) : ( Image will appear here )} ); }; export default IndexPage; 接下来，我们将添加 Resize Options 单选按钮，这样我们就可以通过以下代码片段选择不同的调整大小和裁剪选项： //... const IndexPage = () => { //... return ( <> //... //... Resize Options Select Crop Type Scale setCrop(event.target.value)} /> Crop setCrop(event.target.value)} /> setHeight(event.target.value)} /> setWidth(event.target.value)} /> //... ); }; export default IndexPage; 在上面的代码片段中：添加了裁剪类型以及宽度和高度选项添加了一个 onChange 属性来分别跟踪高度和宽度输入框的变化我们的应用程序的最终输出应该类似于下面的内容：如果你想查看完整代码，这里是项目的 GitHub 仓库：https://github.com/Olanetsoft/how-to-upload-crop-and-resize-images-in-the-browser-in-next.js 结论这篇文章展示了如何在 Next.js 的浏览器中上传、裁剪和调整图像大小。资源你可能会发现这些资源很有帮助。 Cloudinary transformation URL reference Cloudinary Image Transformation 使用 Next.js 和 Supabase 进行全栈开发 luojiyin — Fri, 18 Mar 2022 09:00:00 +0000 原文：Full Stack Development with Next.js and Supabase – The Complete Guide，作者：Nader Dabit Supabase 是一个Firebase的开源替代品，让你在不到两分钟的时间内创建一个实时后台。在过去的几个月里，Supabase 持续被我周围的开发人员宣传和采用。和我交流过的很多人都喜欢它利用 SQL 风格的数据库这一事实，他们也喜欢它是开源的。当你创建一个项目时，Supabase会自动给你一个Postgres SQL数据库、用户认证和API。从那里你可以很容易地实现额外的功能，如实时订阅和文件存储。在本指南中，你将学习如何构建一个全栈应用程序，实现大多数应用程序需要的核心功能--如路由、数据库、API、认证、授权、实时数据和细粒度访问控制。我们将使用一个现代堆栈，包括React, Next.js, 和 TailwindCSS. 我试图把我自己在使用Supabase的过程中所学到的东西提炼成一个尽可能简短的指南，这样你也可以开始用这个框架构建全栈应用。我们将建立的应用程序是一个多用户博客应用程序，其中包含了你在许多现代应用程序中看到的所有类型的功能。这将使我们超越基本的CRUD，实现文件存储以及授权和细粒度的访问控制等功能。你可以在这里找到我们将要建立的应用程序的代码。通过学习如何将所有这些功能结合在一起，你应该能够利用你在这里学到的东西，建立你自己的想法。了解基本结构本身，你就可以在将来带着这些知识，以你认为合适的方式使用它。 Supabase概述如何构建全栈式应用程序我对全栈式无服务器框架非常着迷，因为它们为希望构建完整应用的开发者提供了大量的支持和敏捷性。 Supabase将强大的后端服务与易于使用的客户端库和SDK结合起来，提供了一个端到端的解决方案。这种组合使你不仅可以在后端建立起必要的个别功能和服务，而且可以通过利用同一团队维护的客户端库，在前端轻松地将它们整合在一起。由于Supabase是开源的，你可以选择自我托管或将你的后端部署为托管服务。而且，正如你所看到的，我们很容易就能使用它的免费服务，不需要信用卡。为什么使用Supabase 我曾在AWS领导前端Web和移动开发者倡导团队，并写了一本关于构建这些类型的应用程序的书。所以我在这个领域积累了相当多的经验。我认为Supabase带来了一些非常强大的功能，当我开始使用它进行构建时，这些功能立即让我感到震惊。数据访问方式我过去使用的一些工具和框架的最大限制之一是缺乏查询功能。我非常喜欢Supabase，因为它是建立在Postgres之上的，它能够实现一套极其丰富的、开箱即用的高性能查询功能，而不需要编写任何额外的后端代码。客户端SDK提供了易于使用的filters 和modifiers，以实现几乎无限的数据访问模式的组合。因为数据库是SQL，关系型数据很容易配置和查询，而且客户端库把它作为第一等公民来考虑。权限当你写好“hello world”时，许多类型的框架和服务很快就会被淘汰。这是因为大多数真实世界的需要远远超出了你经常看到的这些工具所提供的基本CRUD功能。一些框架和管理服务的问题是，它们创建的抽象没有足够的扩展性，无法轻松修改配置或定制业务逻辑。这些限制往往使其难以考虑到在现实世界中构建应用程序时出现的许多一次性的用例。除了实现广泛的数据访问模式外，Supabase还使配置授权和精细的访问控制变得容易。这是因为它是简单的Postgres，使你能够直接从内置的SQL编辑器中实现任何你想要的row-level security policies(行级安全策略) 你可以直接从内置的SQL编辑器中获取你想要的信息（我们将在这里讨论这个问题）。 UI 组件除了由构建其他Supabase工具的同一个团队维护的客户端库之外，他们还维护了一个UI 组件库 (beta)使你能够使用各种UI元素来启动和运行。最强大的是Auth，它与你的Supabase项目集成，以快速启动一个用户认证流程（我将在本教程中使用它）。多种认证方式 Supabase启用了以下所有类型的认证机制：用户名和密码电子邮件链接谷歌 Facebook Apple GitHub Twitter Azure GitLab Bitbucket 开源它最大的优点之一是完全开源（是的，后端也是）。这意味着，你可以选择无服务器托管的方式，也可以自己托管。这意味着，如果你愿意，你可以用Docker运行Supabase，托管自己的应用程序在 AWS、GCP 或 Azure上。这将让你在使用Supabase时避免云服务商锁定问题。如何开始使用Supabase 项目设置为了开始，让我们首先创建Next.js应用程序。 npx create-next-app next-supabase 接下来，进入目录并使用NPM或Yarn安装我们的应用程序所需的依赖。 npm install @supabase/supabase-js @supabase/ui react-simplemde-editor easymde react-markdown uuid npm install tailwindcss@latest @tailwindcss/typography postcss@latest autoprefixer@latest 接下来，创建必要的Tailwind配置文件： npx tailwindcss init -p 现在更新tailwind.config.js，将Tailwind typography插件添加到插件数组中。我们将使用这个插件来为我们的博客设计标记。 plugins: [ require('@tailwindcss/typography') ] 最后，将styles/globals.css中的样式替换为以下内容。 @tailwind base; @tailwind components; @tailwind utilities; Supabase项目初始化现在项目已经在本地创建，让我们来创建Supabase项目。为此，请前往Supabase.io，点击Start Your Project。通过GitHub账号完成认证，然后在账户中提供给你的组织下创建一个新项目。给项目一个Name和Password，然后点击Create new project。你的项目将需要大约2分钟的时间来创建。如何在Supabase中创建一个数据库表当你创建了你的项目，让我们继续为我们的应用程序创建表，以及我们需要的所有权限。要做到这一点，请点击左边菜单中的SQL链接。在这个视图中，点击Query-1下的 Open queries，粘贴以下SQL查询，并点击 RUN。 CREATE TABLE posts ( id bigint generated by default as identity primary key, user_id uuid references auth.users not null, user_email text, title text, content text, inserted_at timestamp with time zone default timezone('utc'::text, now()) not null ); alter table posts enable row level security; create policy "Individuals can create posts." on posts for insert with check (auth.uid() = user_id); create policy "Individuals can update their own posts." on posts for update using (auth.uid() = user_id); create policy "Individuals can delete their own posts." on posts for delete using (auth.uid() = user_id); create policy "Posts are public." on posts for select using (true); 这将创建我们将在应用程序中使用的posts表。它还启用了一些行级(row)权限: 所有用户都可以查询帖子只有已登录的用户可以创建帖子，他们的用户ID必须与传入参数的用户ID一致只有帖子的主人可以更新或删除它现在，如果我们点击Table editor链接，我们应该看到我们的新表以适当的模式创建。这这样！我们的后端已经准备好了，我们可以开始建立用户界面了。用户名+密码认证已经默认启用，所以我们现在需要做的就是在前端把一切都连接起来。 Next.js Supabase 配置现在项目已经创建，我们需要一种方法让我们的Next.js应用程序知道我们刚刚为它创建的后端服务。对我们来说，配置的最好方法是使用环境变量。Next.js允许通过在项目根部创建一个名为 .env.local 的文件来设置环境变量，并将它们存储在那里。为了向浏览器暴露一个变量，你必须在变量前加上 NEXT_PUBLIC_。在项目的根部创建一个名为**.env.local** 的文件，并添加以下配置。 NEXT_PUBLIC_SUPABASE_URL=https://app-id.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-public-api-key 你可以在Supabase仪表板的设置中找到你的API URL和API密钥的值：接下来，在项目的根部创建一个名为api.js的文件，并添加以下代码： // api.js import { createClient } from '@supabase/supabase-js' export const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ) 现在我们将能够导入supabase实例并在我们的应用程序中的任何地方使用它。下面是使用Supabase JavaScript客户端与API互动的概况。查询数据: import { supabase } from '../path/to/api' const { data, error } = await supabase .from('posts') .select() 在数据库中创建新条目： const { data, error } = await supabase .from('posts') .insert([ { title: "Hello World", content: "My first post", user_id: "some-user-id", user_email: "myemail@gmail.com" } ]) 正如我前面提到的，filters和modifiers使得实现各种数据访问模式和你的数据的选择集变得非常容易。认证 – 注册: const { user, session, error } = await supabase.auth.signUp({ email: 'example@email.com', password: 'example-password', }) 认证 – 登录: const { user, session, error } = await supabase.auth.signIn({ email: 'example@email.com', password: 'example-password', }) 在我们的案例中，我们不会手工编写主要的认证逻辑，我们将使Supabase UI中的Auth组件。如何构建应用程序现在，让我们开始构建用户界面吧！为了开始，让我们首先更新应用程序，实现一些基本的导航和布局风格。我们还将配置一些逻辑，以检查用户是否已经登录，并在他们登录后显示一个创建新帖子的链接。最后，我们将为任何`auth'事件实现一个监听器。当一个新的“Auth”事件发生时，我们将检查以确保当前有一个登录的用户，以便显示或隐藏 Create Post 的链接。打开文件 _app.js，添加以下代码： // pages/_app.js import Link from 'next/link' import { useState, useEffect } from 'react' import { supabase } from '../api' import '../styles/globals.css' function MyApp({ Component, pageProps }) { const [user, setUser] = useState(null); useEffect(() => { const { data: authListener } = supabase.auth.onAuthStateChange( async () => checkUser() ) checkUser() return () => { authListener?.unsubscribe() }; }, []) async function checkUser() { const user = supabase.auth.user() setUser(user) } return ( Home { user && ( Create Post ) } Profile ) } export default MyApp 如何制作一个用户资料页接下来，让我们创建profile页面。在页面目录中，创建一个名为profile.js的新文件，并添加以下代码: // pages/profile.js import { Auth, Typography, Button } from "@supabase/ui"; const { Text } = Typography import { supabase } from '../api' function Profile(props) { const { user } = Auth.useUser(); if (user) return ( <> Signed in: {user.email} ); return props.children } export default function AuthProfile() { return ( ) } 简介页使用了Auth组件，源自Supabase UI library。这组件将渲染出一个有“sign up” 和 “sign in” 表单(form)为未认证用户, 一个带有“sign out”按钮的基本用户资料为已认证用户。它还将启用一个有随机数(magic)的登录链接。如何创建新的帖子接下来，让我们创建一个create-post页面。在pages目录下，创建一个名为create-post.js的页面，代码如下： // pages/create-post.js import { useState } from 'react' import { v4 as uuid } from 'uuid' import { useRouter } from 'next/router' import dynamic from 'next/dynamic' import "easymde/dist/easymde.min.css" import { supabase } from '../api' const SimpleMDE = dynamic(() => import('react-simplemde-editor'), { ssr: false }) const initialState = { title: '', content: '' } function CreatePost() { const [post, setPost] = useState(initialState) const { title, content } = post const router = useRouter() function onChange(e) { setPost(() => ({ ...post, [e.target.name]: e.target.value })) } async function createNewPost() { if (!title || !content) return const user = supabase.auth.user() const id = uuid() post.id = id const { data } = await supabase .from('posts') .insert([ { title, content, user_id: user.id, user_email: user.email } ]) .single() router.push(`/posts/${data.id}`) } return ( Create new post setPost({ ...post, content: value })} /> ) } export default CreatePost 这个组件渲染了一个Markdown编辑器，允许用户创建新的帖子。 createNewPost函数将使用supabase实例，使用本地表单状态创建新的帖子。你可能注意到，我们没有传入任何消息头(headers)。这是因为如果用户已经登录，Supabase客户端库会自动将访问令牌包含在已登录用户的消息头(headers)中。如何查看单个帖子我们需要配置一个页面来查看单个帖子。这个页面使用getStaticPaths来在构建时根据从API回来的帖子动态地创建页面。我们还使用fallback标志来启用动态SSG页面生成的返回路径。我们使用getStaticProps使帖子数据被获取，然后在构建时作为props传入页面。在pages目录下创建一个名为posts的新文件夹，并在该文件夹中创建一个名为[id\].js 的文件。在pages/posts/[id\].js，添加以下代码。 // pages/posts/[id].js import { useRouter } from 'next/router' import ReactMarkdown from 'react-markdown' import { supabase } from '../../api' export default function Post({ post }) { const router = useRouter() if (router.isFallback) { return Loading... } return ( {post.title} by {post.user_email} ) } export async function getStaticPaths() { const { data, error } = await supabase .from('posts') .select('id') const paths = data.map(post => ({ params: { id: JSON.stringify(post.id) }})) return { paths, fallback: true } } export async function getStaticProps ({ params }) { const { id } = params const { data } = await supabase .from('posts') .select() .filter('id', 'eq', id) .single() return { props: { post: data } } } 如何查询和渲染帖子列表接下来，让我们更新index.js，以获取并渲染一个帖子的列表： // pages/index.js import { useState, useEffect } from 'react' import Link from 'next/link' import { supabase } from '../api' export default function Home() { const [posts, setPosts] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { fetchPosts() }, []) async function fetchPosts() { const { data, error } = await supabase .from('posts') .select() setPosts(data) setLoading(false) } if (loading) return Loading ... if (!posts.length) return No posts. return ( Posts { posts.map(post => ( {post.title} Author: {post.user_email} ) ) } ) } 让我们来测试一下现在我们的应用程序的所有部分都准备好了，所以让我们来试试。要运行本地服务器，从你的终端运行dev命令。 npm run dev 当应用程序加载时，你应该看到以下画面：要注册，请点击Profile并创建一个新账户。你应该在注册后收到一个电子邮件链接，以确认你的账户。你也可以通过使用随机数(magic)的链接创建一个新账户。当你登录后，你应该能够创建新的帖子：回到主页，你应该能够看到你已经创建的帖子的列表，并能够点击帖子的链接来查看它。如何编辑帖子现在我们已经启动并运行了应用程序，让我们来学习如何编辑帖子。为了开始学习，让我们创建一个新的视图(view)，它将只获取已登录用户创建的帖子。为此，在项目的根目录创建一个名为my-posts.js的新文件，代码如下： // pages/my-posts.js import { useState, useEffect } from 'react' import Link from 'next/link' import { supabase } from '../api' export default function MyPosts() { const [posts, setPosts] = useState([]) useEffect(() => { fetchPosts() }, []) async function fetchPosts() { const user = supabase.auth.user() const { data } = await supabase .from('posts') .select('*') .filter('user_id', 'eq', user.id) setPosts(data) } async function deletePost(id) { await supabase .from('posts') .delete() .match({ id }) fetchPosts() } return ( My Posts { posts.map((post, index) => ( {post.title} Author: {post.user_email} Edit Post View Post )) } ) } 在对 post 的查询中，我们使用用户 id，选择由登录用户创建的帖子。接下来，在pages目录下创建一个名为edit-post的新文件夹。然后，在这个文件夹中创建一个名为 [id\].js 的文件。在这个文件中，我们将从一个路由参数中获取访问帖子的`id'。当组件加载时，我们将使用来自路由的帖子ID来获取帖子数据，并使其可用于编辑。在这个文件中，添加以下代码： // pages/edit-post/[id].js import { useEffect, useState } from 'react' import { useRouter } from 'next/router' import dynamic from 'next/dynamic' import "easymde/dist/easymde.min.css" import { supabase } from '../../api' const SimpleMDE = dynamic(() => import('react-simplemde-editor'), { ssr: false }) function EditPost() { const [post, setPost] = useState(null) const router = useRouter() const { id } = router.query useEffect(() => { fetchPost() async function fetchPost() { if (!id) return const { data } = await supabase .from('posts') .select() .filter('id', 'eq', id) .single() setPost(data) } }, [id]) if (!post) return null function onChange(e) { setPost(() => ({ ...post, [e.target.name]: e.target.value })) } const { title, content } = post async function updateCurrentPost() { if (!title || !content) return await supabase .from('posts') .update([ { title, content } ]) .match({ id }) router.push('/my-posts') } return ( Edit post setPost({ ...post, content: value })} /> ) } export default EditPost 现在，在位于pages/_app.js的导航中添加一个新链接： // pages/_app.js { user && ( My Posts ) } 当运行应用程序时，你应该能够查看你自己的帖子，编辑它们，并从更新用户界面删除它们。如何启用实时更新现在，我们已经运行了应用程序，添加实时更新是很容易的。默认情况下，数据库中的Realtime是禁用的。让我们为posts表打开Realtime。要做到这一点，打开应用程序仪表板并点击 Databases -> Replication -> 0 Tables (Source下面)。打开 posts 表Realtime功能。这里是一个关于如何做的视频演练，以使其清晰明了。接下来，打开 src/index.js，用以下代码更新 useEffect hook： useEffect(() => { fetchPosts() const mySubscription = supabase .from('posts') .on('*', () => fetchPosts()) .subscribe() return () => supabase.removeSubscription(mySubscription) }, []) 现在，我们将订阅posts表中的实时变化。该应用程序的代码位于这里。下一步现在你应该对如何用Supabase和Next.js构建全栈应用有了一定的了解。如果你想了解更多关于用Supabase构建全栈应用的信息，我建议查看以下资源。 Supabase 文档 Supabase 示例项目 Is Supabase Legit? Firebase Alternative Breakdown Supabase Auth 深入探讨第 1 部分：JWT Build in Public 001 - 构建 Next.js + Supabase 教程身份验证深入了解 Supabase 和 Sveltekit 在Replit上使用Supabase和nodejs 如何使用 GitHub Actions 将 Next.js 网站部署到 AWS S3 luojiyin — Thu, 13 Jan 2022 04:30:00 +0000 Next.js和静态 web应用的好处是，你将它们储存在对象储存里，几乎可以在任何地方运行, 比如AWS S3。但是每次手动更新这些文件可能是一件痛苦的事. 我们如何用Github Actions来自动持续部署我们的应用程序到S3? 什么是GitHub Actions 什么是持续部署我们怎么去构建第0步: 在GitHub上建立一个新的Next.js项目第1步: 手工创建一个用于部署next.js项目的新S3桶第2步: 创建一个新的GitHub Action工作流来自动化构建一个Next.js项目第3步: 配置一个GitHub Action，部署静态网站到S3上什么是GitHub Actions GitHub Actions是GitHub的一项免费服务，它允许我们用代码实现任务自动化。我在这篇文章里介绍了如何用它来自动化任务，比如在运行代码中的测试，并向Slack发送通知。它们提供一种灵活的方式，在我们现有的工作流基础上为自动化运行代码。这提供了很多的可能性，比如部署我们的网站。什么是 AWS S3？ S3（简单存储服务）是AWS的一个对象存储服务。它允许你在云上轻松存储文件，使它们在世界各地都可以使用。它还允许你将这些文件作为一个网站使用。因为我们可以把HTML文件作为一个对象上传，我们也可以配置S3，让一个HTTP请求访问该文件。这意味着，我们可以在S3中直接托管整个网站. 什么使持续部署？持续部署（Continuous Deployment），通常是指将代码处在可发布的状态，自动化部署代码，缩短部署部署时间。在这个示例中，我们将配置项目，持续将更新推送或者合并到git主分支，部署到网站。我们怎样去构建? 我们首先要使用默认的Next.js起始模板初始化一个简单的Next.js应用，并配置将其编译成静态文件。如果你不向创建一个Next.js项目，你甚至用一个简单的HTML文件跟着做，并不运行任何构建命令。但Next.js是构建动态网站应用的一种现代化方式，所以我将从这里开始。随着我们的网站文件准备就绪，我们将在AWS中创建和配置一个S3桶，在S3桶上托管我们的网站。最后，我们将创建一个新的GitHub Action工作流，当我们的主分支（main）发生新的变化时，它将自动更新S3中网站文件。第0步：在GitHub上创建一个新的Next.js项目我们将从Next.js的默认模板开始。在创建你像创建项目的目录后，运行: yarn create next-app my-static-website # 或者 npx create-next-app my-static-website 注意：请注意将my-static-website替换为你想选择的名称。我们将在本教程的其余部分使用这个名字。如果进入到该目录并运行开发命令，你应该能够成功启动你的开发服务器。 cd my-static-website yarn dev # or npm run dev New Next.js App 接下来，让我们把我们的项目配置为静态编译。在 package.json文件, 把build 脚本改为 : "build": "next build && next export", 这样做的目的时告诉Next将网站导出为静态文件，我们将它用于托管网站。 yarn build # 或者 npm run build 一旦完成, 我们将查看 out目录，看到我们新网站的所有文件。 Next.js 的静态输出最后，我们要把它推送到GitHub上。在你的GitHub账号中创建一个新的仓库。然后会提供如何添加现有项目到该仓库的说明。一旦把你的项目推送到GitHub上，我们就做好了建立我的新网站项目的准备。 GitHub中的新repo 有下面的提交内容添加初始Next.js项目通过创建Next引用配置Next.js导出第1步: 手动创建新的S3桶，并将Next.js项目部署到上面。要开始使用我们的新S3桶，首先登录你的AWS账号，并进入到S3服务。发现没有桶我们要创建一个新桶，使用我们选择的名字命名，用于我们网址托管的S3，我们还要配置我们的S3桶，使其能够托管一个网站。 _注意: 本教程步会指导你如何在S3上托管网站，但是你可以查看我的另一个教程，该教程将一步步地指导你在S3上托管网站。静态网站在AWS S3上托管当我们把S3桶配置成一个网站，我们就可以回到Next.js项目文件夹，运行我们的构建命令，然后把out文件夹中的所有文件上传到我们的新建的S3桶。 S3桶上的静态应用当这些文件被上传，并且我们已经为网站托管配置了S3桶，我们现在应该能看到我们的项目在网络上线运行！ AWS S3托管Next.js应用程序第2步: 创建一个新的GitHub Action工作流来自动构建一个Next.js项目首先，我们需要创建一个新的工作流程(workflow)。如果你熟悉GitHub Actions，你可以手动创建一个，单我们将通过用户界面快速创建一个。进入GitHub的仓库中的Action标签，点击set up a workflow yourself,来自行设置工作流。新的GitHub Action工作流 GitHub提供了一个模板，我们可以在工作流程中使用，不过我们要做一些修改。让我们做以下工作。可选: 将文件重名为deploy.yml 可选: 将workflow重名为CD (因为它与CI不同) 可选: 删除所有的注释，使其更容易阅读删除on 属性中的pull_request 删除所有的 steps 除了uses: actions/checkout@v2 因此，在这一点上，我们应该剩下的是: name: CD on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 仅仅这段代码会触发一个流程，会启动一个新的Ubuntu实例，并在GitHub上有新的改动推送到主分支后，拉取代码到Ubuntu上。接下来，当我们获取我们的代码后，我们要构建它。然后将输出文件同步到S3。这一步将基于你的项目使用yarn还是npm有所不同。如果你使用yarn，在 steps定义下，添加以下内容。 - uses: actions/setup-node@v1 with: node-version: 12 - run: npm install -g yarn - run: yarn install --frozen-lockfile - run: yarn build 如果是使用npm，添加以下内容: - uses: actions/setup-node@v1 with: node-version: 12 - run: npm ci - run: npm run build 在这两个步骤之间，我们要做的是: 设置 node: 这是为了我们能够使用npm 和node 来安装和运行的脚本安装Yarn (仅对使用Yarn): 如果我们使用Yarn，我们将为其安装全局依赖，以便我们使用它安装依赖: 我们安装我们的依赖，我们使用一个特定命令，确保我们使用lock文件，以避免任何意外的软件包升级构建: 最后, 我们运行我们的构建命令，将我们的Next.js项目编译到out目录中。现在我们可以将该该文件直接提交到我们的main分支，这触发我们的workflow的运行，我们可以子啊Actions标签里看到。在GitHub Actions中新的workflow 为了看到它的运行状态，我们进入运行的workflow，选择我们的workflow，看到所有我们的项目包含的步骤。 GitHub Action成功构建日志随着提交! 第3步: 配置一个GitHub Action，将静态网站部署到S3上现在我们正在自动构建我们的项目，我们想在S3中自动更新我们的网站。为了做到这一点，我们将使用GitHub Action aws-actions/configure-aws-credentials(配置aws凭证) 和 the AWS CLI(AWS提供的命令行)。我们使用GitHub Action 将接收我们的AWS凭证和配置，并在workflow的生命周期内使用。目前，GitHub Action中的Ubuntu实例允许使用AWS CLI，因为它包含在其中。因此，我们将能够在workflow中使用CLI命令。另外，我们也可以使用S3 Sync action。但是通过使用AWS CLI，我们可以获得更多的灵活性来定制我们的设置，我们可以使用它来获得额外的CLI命令，一般来说，熟悉AWS CLI也是不错的。为了开始，让我们在workflow添加以下片段作为附加步骤。 - uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: us-east-1 上面要做的是使用AWS凭证配置action，根据我们的设置来设置我们的AWS的Access Key和Secret Key还有region(区域)。 AWS Region可以自定义为你通常使用的AWS账号的任何区域，我在美国东北部，所以我设置为us-east-1。 Access Key和Secret Key是你需要你的AWS账号生成的凭证。我们的代码设置方式是，我们将这些值存储在GitHub Secrets里，要防止这些密钥被泄。当action运行时，GitHub会将这些值改为星星(***)，这样人们就无法访问这些密钥。为了设置这些secrets,我们首先要在AWS生成 Access Keys。进入了AWS控制台。在用户菜单下，选择 My Security Credentials，然后选择 Create access key。在AWS创建一个 Access Key 这会生成两个值 Access key ID 和Secret access key。必须保存好这些值，因为你将无法再次访问Secret key ID 。在AWS中寻找 Secret Key 和 Access Key 注意: 记住不要再你的代码中包含Access Key和Secret Key。这可能导致有人破坏你的AWS凭证。下一步，在GitHub repo中，进入到 Settings -> Secrets，然后选择 New secret。在这里，我们要使用AWS keys添加到下面的secrets: AWS_ACCESS_KEY_ID: your AWS Access key ID AWS_SECRET_ACCESS_KEY: your AWS Secret key 当保存下来，你就应该记住这两个新的secrets。在GitHub中创建Secrets 现在我们已经配置好了我们的凭证，我们应该为运行命令，将我们的项目同步到S3，做好准备。在Github Action，添加以下步骤: - run: aws s3 sync ./out s3://[bucket-name] 注意: 请确保[bucket-name] 替换为你的S3桶的名称。这个命令会触发与我们的S3桶的同步(sync)，使用out目录的文件，也就是我们项目构建的地方。现在，如果我们提交我们的修改，我们可以看到，一旦提交到main分支，我们的actions会自动触发，我们构建我们的项目并同步到S3！成功通过GitHub Action workflow 同步到AWS S3 注意: 请确保在设置这个action之前，你已经将S3桶配置为网站托管(包括解除S3桶权限) --否则这个action可能失败。在这一点上，我们的项目可能看起来是一样的，因为我们对代码进行任何修改。 AWS S3的Next.js应用程序但如果你做了一个代码修改，比如在pages/index.js中改变主页的标题，并提交该修改: Colby's Next.js! Site 我们可以看到，我们的修改触发了workflow的启动: 新的GitHub Action workflow的触发来自代码改变一旦我们的workflow完成，我们可以看到我们的内容已经在我们的网站上自动更新。 AWS S3托管的应用程序，代码已经更新随着内容的提交添加ASW的配置和S3 sync命令测试workflow的标题的更新我们还能做什么? 设置CloudFront 这个篇文章的目的不是要经历AWS配置网站的整个过程，但是你在S3上运行网站服务，你可能在之前考虑过CloudFront。你可以查看以下我的另一个指南，它指导你如何设置CloudFront，以及如何在S3中创建网站的手把手指南。 CloudFront的缓存失效如果你的S3网站在CloudFront后面，有可能你会确保CloudFront没有缓存新的变化。通过AWS CLI，我们也可以触发CloudFront的缓存失效，以确保它正在抓取最新的变化。请看这里的文档学习更多的知识. pull request部署如果你不断地在pull request中的网站修改，有时候更容易看到网站的修改。你可以设置一个新的workflow，只在pull request上运行，workflow可以根据分支或者环境动态创建一个新的桶，并在pull request上添加一个带有该URL的comment。你也许能找到一个GitHub Action 作为你管理你pull request上带的comments,你可以查询GitHub Actions文档. 🐦 在推特上关注我 🎥 在油管上订阅我 ✉️ 订阅我的Newsletter 💝 赞助我原文：How to Use Github Actions to Deploy a Next.js Website to AWS S3，作者：Colby Fayock