Next.js 的三个新功能及其使用方法

AWS Amplify 最近添加了对 Next.js 10 功能的支持，包括增量静态再生、可选的“捕获所有路由”以及图像优化。在本文中，我们将深入探讨这些功能的具体含义、如何使用它们实现全栈应用，以及如何将它们部署到 AWS！让我们开始吧。

请注意，我是 AWS Amplify 团队的开发倡导者，如果您有任何反馈或疑问，请联系我或在我们的 Discord - discord.gg/amplify 上提问！

如果您是 Next.js 新手，请先阅读本教程来入门！我还写了一篇关于如何创建全栈 Next.js 应用的教程，如果您想了解一下的话，可以参考一下。

设置

首先，让我们创建一个 Next.js 应用程序：

npx create-next-app next10-blog

现在，让我们创建应用后端。前往Amplify Sandbox，然后点击“开始”。在下一页上选择“数据”，然后从博客架构开始。

我删除了“博客”模型，并将“内容”字段添加到帖子模型。

然后，您可以跳过“在您的应用中进行本地测试”页面，直接使用您的 AWS 账户进行部署。按照指导步骤部署您的应用！

后端部署完成后，进入应用的管理界面，然后点击右上角的“本地设置说明”。在您创建的 Next 应用中运行 Amplify pull 命令。此外，安装 AWS Amplify 库和 TypeScript——您的代码不需要 TypeScript，它只是用于生成的 DataStore 模型。

amplify pull --appId your-appID --envName staging
npm install aws-amplify typescript

我还要为我的应用生成一些博客文章。在 Amplify 管理界面中点击“管理应用内容”。在“操作”下拉菜单下，您会看到一个“自动生成数据”选项。继续，生成 10 篇博客文章。您会看到标题和描述弹出！

现在是时候编写代码了！打开您之前几步生成的 Next.js 应用。打开 _app.js 文件并添加以下内容。这将使 Amplify 的前端库自动与您创建的后端资源绑定！我们还将启用服务器端渲染。

import Amplify from 'aws-amplify'
import awsconfig from '../src/aws-exports'
Amplify.configure({ ...awsconfig, ssr: true })

现在，我们将实现index.js路由——这个主页将列出我们所有的博客文章，并将它们链接到一个只显示一篇文章的二级页面。我们将使用SSR来实现这个路由。

首先，我将从生成的目录中导入我的数据模型src/models。我还将withSSRContext从 Amplify 导入函数——这将允许我们在服务器端运行查询。

import { withSSRContext } from 'aws-amplify'
import { Post } from '../src/models'

现在，创建一个getServerSideProps函数。然后，我们将允许 Amplify 在服务器上运行withSSRContext，并向其提供请求信息。然后，我们将运行查询以获取所有博客文章！最后，我们将返回一个对象，该对象将我们的模型作为 props 提供！您可以手动转换为 JSON，也可以使用serializeModelAmplify 中的函数。

export async function getServerSideProps (context) {
  const SSR = withSSRContext(context.req)
  const models = await SSR.DataStore.query(Post)

  return {
    props: {
      models: JSON.parse(JSON.stringify(models))
    }
  }
}

现在我们可以映射帖子并将它们呈现在页面上！

export default function Home ({ posts }) {
  return (
    <div>
      <Head>
        <title>Amplify + Next</title>
        <meta name='description' content='Amplify + Next!' />
      </Head>

      <main>
        {posts.map(post => (
          <div key={post.id}>
            <a href={`/post/${post.id}`}>
              <h2>{post.title}</h2>
            </a>
          </div>
        ))}
      </main>
    </div>
  )
}

情报、监视与侦察

现在来看看 Next 10 的新功能！首先，我们将实现 ISR，即增量静态再生。通常，当您使用静态站点生成时，站点会在您部署应用时构建一次。但在很多情况下，您希望静态页面在数据发生变化时更新。ISR 可以实现这一点——您提供一个重新验证时间，getStaticProps一旦到达该时间窗口，页面就会重新生成。本质上，页面最初是静态生成的，在提供的再生时间之前访问页面的初始用户将获得该静态生成的站点。然后，在再生时间到达后对该页面的下一个请求将触发页面在后台重建——触发再生的用户将获得旧版本的页面，但后续用户将获得新版本。这在电子商务场景中尤其有用，在我们的例子中，您无需在每次想要添加新帖子时重新部署博客！

我们将创建一个显示一篇博客文章的页面。首先，我们将post/[post].js在目录中创建一个页面组件/pages/。让我们从需要的导入开始。

import { withSSRContext } from 'aws-amplify'
import { useRouter } from 'next/router'

import { Post } from '../../src/models'

现在，我们将创建一个getStaticPaths函数，为每篇帖子生成一个静态页面。我们将查询所有帖子，对它们进行映射，然后从函数中返回它们。我们还将提供一个fallback: true方法，这样当遇到未生成的路由时，Next.js 不会立即返回 404 错误，而是会尝试在后台生成页面并进行渲染。

export async function getStaticPaths() {
  const SSR = withSSRContext()
  const posts = await SSR.DataStore.query(Post)
  const paths = posts.map(post => ({
    params: { post: post.id }
  }))

  return {
    paths, fallback: true
  }
}

现在，我们将实现我们的getStaticProps。这次我们将使用其 ID 查询一篇帖子。然后，我们将在 props 对象中返回该帖子，并添加revalidate键。这将为我们的页面实现 ISR！我将提供 10，这将使重新验证时间为 10 秒。您可以根据用例更改此值！

export async function getStaticProps(context) {
  const SSR = withSSRContext(context.req)
  const post = await SSR.DataStore.query(Post, context.params.post)
  return {
    props: {
      post: JSON.parse(JSON.stringify(post))
    },
    revalidate: 10
  }
}

现在，我们将在页面上渲染帖子！router.isFallback如果遇到非生成路径，我将使用来渲染加载指示器——我这样做只是因为我使用了fallback: true！

export default function PostPage({ post }) {
  const router = useRouter()

  if (router.isFallback) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </div>
  )
}

然后，我将代码推送到 GitHub。然后，我将返回到我的应用程序的 AWS 控制台页面。您应该会看到该backend environments页面已填充您的管理界面链接。转到相应frontend environments选项卡，您将看到部署应用程序的选项！

按照部署指南的步骤操作，您应该能够从 GitHub 中选择您的分支，并使用从 package.json 中检测到的默认构建脚本！您还将看到有关已部署内容的信息——在本例中，您将拥有一个 Lambda@Edge 函数来为您处理 ISR！

可选捕获所有路线

我们还有两个更快捷的功能要讲，第一个是可选的“捕获所有路由”。它允许你创建一个可以在后面带有任何参数的路由。我们将为“关于”页面创建一个。/about应该渲染页面，但应该/about/hi和也是如此/about/ali/spittel。我们可以创建一个页面组件，然后将其放在双括号中，并在其前面添加三个点来实现。

首先，创建页面文件：

/pages/about/[[...about.js]]

现在，我将实现该组件。我将使用useRouterNext 获取有关路由的信息，然后在页面上渲染路由参数！尝试/about、/about/hi和/about/ali/spittel，看看效果如何！

import { useRouter } from 'next/router'
import React from 'react'

export default function About(props) {
  const routeData = useRouter()
  return (
    <div>
      {JSON.stringify(routeData.query)}
    </div>
  )
}

现在将您的代码推送到 GitHub，Amplify 将使用新的关于页面自动重新部署您的前端！

图像组件

最后，让我们尝试一下Next.jsImage组件。此组件会自动启用图像优化功能，包括调整大小、优化以及在浏览器支持的情况下提供不同的图像类型（例如 webp）。我将我的狗 Blair 的照片添加到了 /public 目录。

然后，我在文件中导入了该Image组件index.js

import Image from 'next/image'

然后，我在页面上渲染了她的照片！

 <Image src='/blair.jpeg' alt='Fluffy white dog lying on a couch' height={200} width={150} />

我再次推送到 GitHub 来重新部署该网站！

结论

希望本教程能帮助您实现一些新的 Next.js 功能并将其部署到 AWS Amplify。如果您想下架应用程序，可以amplify delete从 CLI 运行，代码将保留在本地，但不会再部署到云端。如果您对 AWS Amplify 或本教程有任何反馈，请告诉我！

鏂囩珷鏉ユ簮锛�https://dev.to/aws/ Three-new-next-js-features-and-how-to-use-them-1d3d