当前位置：首页 > news >正文

Nexus与Next.js集成终极指南：构建全栈类型安全应用

news 2026/8/23 1:27:03

Nexus与Next.js集成终极指南：构建全栈类型安全应用

【免费下载链接】nexusCode-First, Type-Safe, GraphQL Schema Construction项目地址: https://gitcode.com/gh_mirrors/ne/nexus

想要在Next.js应用中构建类型安全的GraphQL API吗？Nexus与Next.js的结合为你提供了完美的解决方案！Nexus是一个Code-First、Type-Safe的GraphQL Schema构造工具，而Next.js是现代React框架的佼佼者。将它们结合在一起，你可以轻松创建全栈类型安全应用，享受端到端的类型安全性和卓越的开发体验。

为什么选择Nexus + Next.js组合？

Nexus与Next.js的集成带来了多重优势。首先，Nexus的代码优先方法让你用TypeScript编写GraphQL架构，获得完整的类型安全。其次，Next.js的API路由功能为GraphQL端点提供了完美的托管环境。最重要的是，这种组合实现了真正的全栈类型安全——从数据库到前端组件，类型检查贯穿整个应用栈。

快速开始：5分钟搭建你的第一个Nexus+Next.js项目

第一步：创建Next.js应用并安装依赖

首先创建一个新的Next.js应用，然后安装必要的依赖：

npm init next-app npm i -D typescript @types/react @types/node npm i nexus apollo-server-micro

第二步：创建GraphQL API路由

在Next.js中，API路由基于文件夹约定。在pages/api目录下创建graphql.ts文件，这是你的GraphQL端点：

// pages/api/graphql.ts import { ApolloServer } from 'apollo-server-micro' import schema from '../../schema' const server = new ApolloServer({ schema, }) export const config = { api: { bodyParser: false, }, } export default server.createHandler({ path: '/api/graphql', })

第三步：定义Nexus架构

在项目根目录创建schema文件夹，避免将架构文件放在pages/api目录中（否则Next.js会为每个文件创建API路由）。在schema/Query.ts中定义你的GraphQL类型和查询：

// schema/Query.ts import { objectType, queryType } from 'nexus' export const Framework = objectType({ name: 'Framework', definition(t) { t.id('id') t.string('name') }, }) export const Query = queryType({ definition(t) { t.list.field('frameworks', { type: 'Framework', resolve: () => { return [ { id: '1', name: 'React' }, { id: '2', name: 'Vue' }, { id: '3', name: 'Angular' }, { id: '4', name: 'Svelte' }, ] }, }) }, })

第四步：配置架构生成

在schema/index.ts中配置架构生成，特别注意Next.js对__dirname的特殊处理：

// schema/index.ts import { makeSchema } from 'nexus' import * as QueryTypes from './Query' import path from 'path' const schema = makeSchema({ types: [QueryTypes], outputs: { typegen: path.join(process.cwd(), 'generated/nexus-typegen.ts'), schema: path.join(process.cwd(), 'generated/schema.graphql'), }, }) export default schema

前端数据获取：三种Next.js渲染策略

服务端渲染（SSR）

使用getServerSideProps函数在服务器端获取GraphQL数据：

// pages/index.tsx import { request, gql } from 'graphql-request' export async function getServerSideProps() { const query = gql` { frameworks { id name } } ` const data = await request('http://localhost:3000/api/graphql', query) const { frameworks } = data return { props: { frameworks }, } } export default function Home({ frameworks }) { return ( <div> <ul> {frameworks.map(f => ( <li key={f.id}>{f.name}</li> ))} </ul> </div> ) }

静态站点生成（SSG）

使用getStaticProps进行静态生成，适合内容不频繁变化的页面：

export async function getStaticProps() { const query = gql` { frameworks { id name } } ` const data = await request('http://localhost:3000/api/graphql', query) return { props: { frameworks: data.frameworks }, revalidate: 60, // 每60秒重新验证 } }

客户端渲染（CSR）

对于需要客户端交互的组件，可以使用Apollo Client等GraphQL客户端库：

import { useQuery, gql } from '@apollo/client' const GET_FRAMEWORKS = gql` { frameworks { id name } } ` function FrameworkList() { const { loading, error, data } = useQuery(GET_FRAMEWORKS) if (loading) return <p>Loading...</p> if (error) return <p>Error: {error.message}</p> return ( <ul> {data.frameworks.map(f => ( <li key={f.id}>{f.name}</li> ))} </ul> ) }

构建配置优化：确保类型安全

为了确保构建时的类型安全，需要在Next.js构建之前运行Nexus类型生成。更新package.json中的构建脚本：

{ "scripts": { "dev": "next dev", "build:nexus-typegen": "ts-node --compiler-options '{\"module\":\"CommonJS\"}' --transpile-only schema", "build": "npm run build:nexus-typegen && next build", "start": "next start" } }

这个配置确保在Next.js构建应用之前，Nexus已经生成了所有必要的类型定义文件。

高级集成技巧

1. 使用Prisma进行数据持久化

Nexus与Prisma完美集成，为你的Next.js应用提供完整的数据库层类型安全：

// schema/User.ts import { objectType, queryType } from 'nexus' import { prisma } from '../lib/prisma' export const User = objectType({ name: 'User', definition(t) { t.id('id') t.string('email') t.string('name') }, }) export const Query = queryType({ definition(t) { t.list.field('users', { type: 'User', resolve: () => prisma.user.findMany(), }) }, })

2. 身份验证和授权

利用Nexus插件系统轻松添加身份验证和授权：

import { fieldAuthorizePlugin } from 'nexus' const schema = makeSchema({ types: [Query, Mutation, User], plugins: [fieldAuthorizePlugin()], })

3. 错误处理和日志记录

在Next.js API路由中集成错误处理和日志记录：

// pages/api/graphql.ts const server = new ApolloServer({ schema, formatError: (err) => { console.error('GraphQL Error:', err) return err }, context: ({ req }) => ({ headers: req.headers, }), })