简而言之

Next.js 9のAPI RouteにGraphQLのエンドポイントを生やします
Next.jsもGraphQLもTypescriptで書けます

做法

1. 安装所需的软件包

yarn add apollo-server-micro graphql micro next@latest react@latest react-dom@latest
yarn add -D typescript @types/react

2. 随意地制作主页。

创建pages/index.tsx并随意地设置主页。将文件扩展名设为tsx，这样Next.js 9会自动为我们准备好Typescript的tsconfig.json配置文件。

如果你想要寻求速度⚡️，在编写tsconfig.json之前，请启动服务器

一个例子是随便的主页。

export default ()=>(
    <p>ほげ</p>
)

只需将React组件导出为`export default`，它就会被发布。而像图片等文件，只需简单地放置在`/static`目录下即可发布。

开启服务器

yarn next

第一次终端日志的示例。

~/W/next9 graphql ❯❯❯ yarn next
yarn run v1.15.2
warning package.json: No license field
$ '/███████████/██████████/next9 graphql/node_modules/.bin/next'
[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
We detected TypeScript in your project and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

[ info ]  bundled successfully, waiting for typecheck results ...
[ ready ] compiled successfully (ready on http://localhost:3000)

从 Next.js 9 开始，当服务器上进行预渲染时，页面右下角会显示⚡️标志。

3. 随便搭建一个GraphQL服务器

/pages/api下面可以创建API的端点。建立一个GraphQL的模拟服务器。

import { ApolloServer, gql } from 'apollo-server-micro';

// ここからGraphQLのモックの定義
const typeDefs = gql`
    type Query {
        hello: String
    }
`;

const resolvers = {
    Query: {
        hello: () => 'world',
    },
};

const apolloServer = new ApolloServer({ typeDefs, resolvers });

// ここから先はNext.jsが読みに行く領域
export default apolloServer.createHandler({path:"/api"});
export const config = {
    api: {
        bodyParser: false,
    },
};

在服务器重启之前，API已经启动了。

??開心??

从这里开始，你可以选择安装ApolloClient或者搭建一个非模拟的GraphQL服务器来实现。

请参考：Apollo Client + React 基础教程。

结束

点数

在编写tsconfig之前，先启动服务器吧。

从Next.js 9开始，如果在Next.js可见的地方放置了tsx文件，它会自动创建以下tsconfig.json文件。如果想尽快启动项目，建议先进行tsc –init，然后再安装next。

简单来说，只需编写pages/index.tsx。

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

我們在apollo-server中使用了適用於微服務的版本。

只需将接收(req, res)参数的函数默认导出到pages/api下面，就可以建立一个API服务器。

export default (req, res) => {
  res.setHeader('Content-Type', 'application/json')
  res.statusCode = 200
  res.end(JSON.stringify({ name: 'Nextjs' }))
}

如果您在/pages/api中使用Zeit的micro来创建微服务，相比于修改默认的res，req（并且中间件已经加载了一些），我认为会更加繁忙。这是一个令人愉快的选择。

参考：next.js/examples/api-routes-micro/

就这样，我可以从API路由的外观中看出，apollo-server-Nanchala很可能使用了apollo-server-micro。然而，在启动GraphQL服务器时，有两个令人困惑的地方。

1. 确保正确地指定了GraphQL服务器的路径。

apollo-server默认尝试在本地localhost:3000/graphql上启动服务器。

Next.js 9对于API的设置只能在本地主机的localhost:3000/api下进行，因此我们需要在apollo-server-micro的createHandler中添加选项来完成这个功能。

const apolloServer = new ApolloServer({ typeDefs, resolvers });

const handler = apolloServer.createHandler({path:"/api"});

如果将该处理程序设为默认导出，认为GraphQL服务器会运行起来，但事实并非如此。

陷入困境。输出常量配置={选项}必须要做好。

export default handler;

尽管GraphQL Playground正在运行，看起来API似乎正常工作，但无法下载模式并且无法发送查询，功能并不正常。

根据我的理解，似乎是由于Next.js 9自动设置的bodyParser引起了这个问题。我浪费了好几个小时来解决它。

Next.js 9的API路由内置了一些中间件（例如cookie、query和body等），其中，bodyParser默认为启用状态，并解析req。

然而，在API下，有一种方法可以将设置传递给Next.js 9，这样就可以发送查询并下载模式。以下的config是预先确定的。

export default apolloServer.createHandler({path:"/api"});

export const config = {
    api: {
        bodyParser: false,
    },
};

参考 next.js/examples/api-routes-graphql/。

总结

恐ろしく楽チンにNextのサーバーとGraphQLのサーバを立てられるようになった。