[](https://res.cloudinary.com/practicaldev/image/fetch/s--Q7alyZEX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://blog.ag-grid.com/content/images/2022/05/blog-nextjs-opt.png)

这篇文章由Veronica Stork贡献给 AG Grid 博客。

如果您最近使用过React,您可能听说过Next.js,这是一个具有出色开发经验的流行 React 框架。 Next.js 与许多其他技术完美结合,包括AG Grid,这是一个功能丰富的数据网格,每月下载量超过 120 万次,超过 80% 的财富 500 强公司使用企业版。

Next.js 以其高级功能的轻松实现和卓越的开发人员体验而闻名——它可以轻松创建零配置的生产就绪 Web 应用程序。开箱即用,它包括混合静态和服务器渲染、图像优化、TypeScript 支持、简单路由等。

同时,AG Grid 每秒可处理超过 150,000 次更新,是直播数据的完美选择。它可以创建集成和独立的图表,还具有选择、过滤、排序和编辑行的能力,使其成为处理复杂数据表的全方位有用工具。

Next.js 和 AG Grid 的互补性很强。它们一起可用于创建内部仪表板、财务应用程序、数据模型以及任何其他需要快速、准确处理大量数据的东西。

在本教程中,您将学习如何创建一个 Next.js 应用程序,该应用程序利用 Next 的原生 API 路由来获取数据并使用 AG Grid 将其显示在前端。然后,您将使用Jest和React 测试库创建一些简单的测试。

使用 Next.js 实现 AG Grid

让我们开始吧!

您可以在此处](https://ag-grid-next-app.vercel.app/)中查看本教程的示例应用程序[并参考此GitHub 存储库中的完整代码。

获取一些数据

首先要做的事情是:您需要在网格中显示一些数据。对于示例应用程序,本教程使用Mockaroo生成 100 个包含first_name、last_name、job_title、office、email和phone字段的记录。

要使用 Mockaroo 生成这些记录,请为您要创建的每个字段填写 Field Name 和 Type:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--23_DN2oy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://blog.ag-grid.com/content/images/2022/05/mockaroo1-opt.png)

要查找适当的字段类型,您可以浏览提供的类别或在搜索栏中输入关键字:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ry7wHj4_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://blog.ag-grid.com/content/images/2022/05/mockaroo2-opt.png)

默认情况下,Mockaroo 会生成一千行数据。您可以通过编辑标有“# Rows”的文本框来更改此数字。完成后,单击屏幕底部的下载数据。这会将 CSV 文件下载到您的计算机。

在演示应用程序中,已使用Postico(Mac 的 PostgreSQL 客户端)将 CSV 文件导入托管的ElephantSQL数据库。虽然本教程将向您展示如何使用 ElephantSQL 等 PostgreSQL 数据库构建应用程序,但您可以为自己的应用程序使用您喜欢的任何类型的数据库。

要将文件导入 ElephantSQL,请登录并创建一个新实例。为其命名,选择区域,然后单击 Review。如果一切正常,请单击 Create Instance。

这会自动将您带到您的实例列表。单击您刚刚创建的实例的名称,然后复制 Details 下列出的 URL。

现在,转到 Postico 并单击 New Favorite。如果您已将数据库 URL 复制到剪贴板,Postico 将自动填充您的数据库信息。单击 Connect 以连接到您的数据库:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--uRKQEr5b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://blog.ag-grid.com/content/images/2022/05/elephantsql-opt.png)

连接后,单击 + Table。为您的表格命名,然后单击 + Column 按钮为您在 Mockaroo 中生成的每个字段添加列。然后,转到 File > Import CSV 并选择模拟数据文件。将 CSV 中的列与数据库中的列匹配,然后单击 Import。

现在您已经设置了数据库,是时候创建您的应用程序了!

创建您的 Next.js 应用程序

通过运行以下命令轻松创建 Next.js 应用程序:npx create-next-app@latest <app_name>。

要将 AG Grid 添加到您的项目中,请使用 npm 通过运行npm install --save ag-grid-community ag-grid-react安装它。

如果您使用的是 PostgreSQL 数据库,您还应该通过运行npm install pg来安装pg。如果您使用的是不同类型的数据库,则可能需要安装不同的库。

关于起绒的注意事项

Next.js 使用ESLint提供开箱即用的 linting 功能。检查您的 package.json 文件,您应该会看到”lint”: “next lint”列在scripts下。如果不存在,请添加它。要运行 linter,请运行npm run lint。有关 Next.js 中 linting 的更多信息,请查看这个页面在他们的文档中。

连接到您的数据库

要创建与数据库的连接,首先在应用程序的顶层创建一个名为 utils 的文件夹,然后在其中创建一个名为 db.js 的文件。如果您使用的是 PostgreSQL 数据库,db.js 的内容应如下所示:

import { Pool } from 'pg';

let connection = new Pool({
    connectionString:
     process.env.CONNECTION_STRING
  });

export default connection;

进入全屏模式 退出全屏模式

关于安全性的说明: 由于它包含私有凭据,因此process.env.CONNECTION_STRING变量应存储在安全位置。在使用Vercel托管的演示应用程序中,此变量使用设置下的环境变量存储。许多托管服务都有这个非常方便的安全选项。

现在您已经连接到数据库,在 pages > api 下创建一个名为 staff.js 的文件。 Next.js 允许您创建自己的 API,而无需构建自己的单独后端。 Next.js 会自动将您放在 api 文件夹中的任何文件视为 API 端点。您将在此处使用该功能。

staff.js 文件应如下所示:

import connection from ‘../../utils/db’;

export default async function handler(req, res) {
  try {
    const query = 'SELECT * FROM staff';
    const staff = await connection.query(query);
    res.send(staff);
  } catch (error) {
    console.log(error);
  }
}

进入全屏模式 退出全屏模式

在这段代码中,您使用刚刚编写的db.js连接函数连接到数据库,然后查询数据库以获取staff表中的所有行。当访问此 API 端点时,该数据将作为响应发送。

现在您已经连接到数据库并提供了访问它的方法,是时候在前端工作了。

设置路由

Next.js 中的路由很简单。如果您将导出 React 组件的文件放在 pages 文件夹中,它会自动与基于文件名的路由关联。例如,位于 pages 文件夹中的名为 about.js 的文件将映射到/about。index.js 文件映射到根 (/)。 Next.js 还支持嵌套路由、动态路由和客户端路由转换。要了解有关 Next.js 中路由的更多信息,请查看他们关于主题](https://nextjs.org/docs/routing/introduction)的[文档。

对于这个应用程序,您将使用 index.js 文件来显示您的网格。删除位于 pages 文件夹中的默认 index.js 文件的Home组件的内容。

设置AG网格

现在是时候设置你的网格了!在 index.js 中,进行以下导入:

import { useState, useEffect } from ‘react’;
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

进入全屏模式 退出全屏模式

接下来,使用useState挂钩设置列,如下所示:

 const [columnDefs] = useState([
    { headerName: 'First Name', field: 'first_name' },
    { headerName: 'Last Name', field: 'last_name' },
    { headerName: 'Job Title', field: 'job_title' },
    { field: 'office' },
    { field: 'email’ },
    { field: ‘phone’ }
  ]);

进入全屏模式 退出全屏模式

如果您省略headerName属性,AG Grid 将使用该字段自动为列命名。

设置好列之后,您需要编写一些代码来从您之前设置的 API 端点获取数据。

首先,您将使用useState挂钩创建一个状态变量 (rowData) 来保存数据,并使用一个setRowData函数来更新rowData。

然后,您将使用useEffect挂钩中的fetch访问/api/staff端点,并使用setRowData将从数据库返回的数据存储在rowData变量中。代码应如下所示:

  const [rowData, setRowData] = useState([]);

  useEffect(() => {
    fetch('../api/staff')
      .then((response) => response.json())
      .then((data) => setRowData(data.rows));
  }, []);

进入全屏模式 退出全屏模式

获取数据后,您将使用AgGridReact组件显示它。使用以下代码在 return 语句中创建此组件:

    <div 
      className="ag-theme-alpine"
      style={{ height: '600px' }}
    >
      <AgGridReact
        id="staff_grid"
        rowData={rowData}
        columnDefs={columnDefs}
        style={{ height: '100%', width: '100%' }}
      ></AgGridReact>
    </div>

进入全屏模式 退出全屏模式

您的网格必须引用从 API 调用返回的rowData以及您之前定义的columnDefs对象。只要这两个都存在且格式正确,AG Grid 就会自动处理显示您的网格。

网格应如下所示:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--PX5TijVB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://blog.ag-grid.com/content/images/2022/05/grid-with-columns-opt.png)

构建一些测试

您可以使用各种工具为 Next.js AG Grid 应用程序构建测试。一个不错的选择是Jest。 Next.js 内置了 Jest 的配置,常配合React 测试库进行单元测试。

要设置 Jest,请运行以下命令:npm install --save-dev jest @testing-library/react @testing-library/jest-dom。

接下来,在项目的顶层创建一个 jest.config.js 文件。配置文件应包含以下代码,也可以在 Next.js 文档的testing部分找到:

const nextJest = require('next/jest')

const createJestConfig = nextJest({
   dir: './',
})

const customJestConfig = {
  ['<rootDir>/jest.setup.js'],
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

进入全屏模式 退出全屏模式

编辑package.json以在scripts下包含”test”: “jest –watch”。然后,在项目的根目录中创建一个 tests 文件夹,在该文件夹中包含一个名为 aggrid.test.jsx 的文件。这是您将编写测试的地方。

通常,您需要测试网格是否按预期呈现以及是否正确填充了数据。下面简单测试查看文档中是否存在id为staff_grid的AG Grid组件:

describe('AG Grid Tests', () => {

  it('renders the grid', () => {
    expect(document.querySelector("#staff_grid")).toBeInTheDocument;
  })

})

进入全屏模式 退出全屏模式

同样,通过如下测试,您可以检查列是否正在呈现:

  it('renders the columns', () => {
    expect(document.querySelector(`.ag-cell[col-id="first_name"]`)).toBeInTheDocument;
    expect(document.querySelector(`.ag-cell[col-id="last_name"]`)).toBeInTheDocument;
    expect(document.querySelector(`.ag-cell[col-id="job_title"]`)).toBeInTheDocument;
    expect(document.querySelector(`.ag-cell[col-id="email"]`)).toBeInTheDocument;
    expect(document.querySelector(`.ag-cell[col-id="office"]`)).toBeInTheDocument;
    expect(document.querySelector(`.ag-cell[col-id="phone"]`)).toBeInTheDocument;
  })

进入全屏模式 退出全屏模式

要运行此测试,只需在您的应用程序运行时打开一个新控制台并运行npm run test。您将在控制台中看到结果:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--30V8F5iZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://blog.ag-grid.com/content/images/2022/05/console-with-tests-opt.png)

有关使用 Jest 和 React 测试库测试 AG Grid 的精彩文章,请查看 AG Grid 数字营销负责人 Alan Richardson 撰写的这篇博客文章。

开发、预览、发货!

使用 Next.js 时,您可以轻松快速地进行开发、预览和发布。Vercel,负责 Next.js 的公司也提供了出色的托管服务。您可以使用他们的 GitHub 集成轻松部署到 Vercel。然后,您可以与您的队友一起预览部署,并在每次代码更改后在您交付之前获得快速反馈。

在 Vercel 上部署应用程序的最简单方法是导入GitHub存储库。如果还没有,请将本地目录初始化为 Git 存储库,提交文件,然后将它们推送到 GitHub 上的远程分支。有关将本地托管项目添加到 GitHub 的更多详细信息,请查看本教程解释该过程。

一旦您的应用程序代码在 GitHub 上,请使用您的 GitHub 帐户登录 Vercel,然后单击屏幕右上角的 New Project 按钮创建一个新项目:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--_NszNlTW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://blog.ag-grid.com/content/images/2022/05/ship-it-opt.png)

接下来,从 Import Git Repository 下选择正确的存储库。

这就是你需要做的!现在,每当您推送到主分支时,您的应用程序都会更新。

结论

在本文中,您学习了如何创建一个 Next.js 应用程序,该应用程序使用 AG Grid 来显示一个简单的数据网格。 AG Grid 包含大量功能;它可以处理大量数据、直播更新和集成图表。您还可以使用它对表中的数据进行透视、过滤、排序和选择,这还不是它的全部功能。要了解更多关于 AG Grid、的信息,请查看他们的文档。

如果您想扩展本教程中描述的演示应用程序,转到 GitHub 存储库并 fork 并克隆它。该应用程序包含本教程未涵盖的一些扩展功能,但即便如此,它也没有触及 Next.js 和 AG Grid 可能实现的功能的表面。