Next.js API 경로를 사용하여 GraphQL 서버를 구축하는 방법

게시 됨: 2022-03-10

빠른 요약 ↬ 이 가이드는 Next.js API 경로의 기본 사항을 알려줍니다. REST 또는 GraphQL API와 비교하여 API 경로가 무엇이고 왜 API 경로가 유용한지 설명하는 것으로 시작하겠습니다. 그런 다음 Next.js와 Github API를 사용하여 최초의 GraphQL 서버를 구축하는 방법에 대한 단계별 자습서를 안내합니다.

Next.js는 프로덕션에 필요한 모든 기능으로 최고의 개발자 경험을 제공합니다. Next.js API 경로를 사용하여 API를 빌드하는 간단한 솔루션을 제공합니다.

이 가이드에서는 먼저 API 경로가 무엇인지 배우고 Next.js API 경로를 사용하여 Github API에서 데이터를 검색하는 GraphQL 서버를 만듭니다.

이 튜토리얼을 최대한 활용하려면 최소한 GraphQL에 대한 기본적인 이해가 필요합니다. Apollo Server에 대한 지식은 도움이 되지만 필수 사항은 아닙니다. 이 튜토리얼은 React 또는 Next.js 기술을 서버 측으로 확장하고 Next.js 및 GraphQL을 사용하여 첫 번째 전체 스택 앱을 구축할 수 있기를 원하는 사람들에게 도움이 될 것입니다.

그럼 본격적으로 들어가 볼까요?

Next.js API 경로란 무엇입니까?

Next.js는 클라이언트 또는 서버에서 React 앱을 렌더링할 수 있는 프레임워크입니다. 버전 9부터 Next.js는 이제 Node.js, Express, GrapQL 등으로 API를 빌드하는 데 사용할 수 있습니다. Next.js는 파일 시스템을 사용하여 pages/api 폴더 내의 파일을 API 끝점으로 처리합니다. 즉, 이제 URL https://localhost:3000/api/your-file-name 에서 API 엔드포인트에 액세스할 수 있습니다.

React 출신이고 Next.js를 사용한 적이 없다면 Next.js가 React 프레임워크이기 때문에 혼란스러울 수 있습니다. 그리고 우리가 이미 알고 있듯이 React는 프론트 엔드 앱을 빌드하는 데 사용됩니다. 그렇다면 백엔드 앱 및 API에 Next.js를 사용하는 이유는 무엇입니까?

글쎄요, Next.js는 React, Node.js, Babel, Webpack으로 구축되었기 때문에 클라이언트 측과 서버 측 모두에서 사용할 수 있으며, 당연히 서버에서도 사용할 수 있어야 합니다. Next.js는 서버에 의존하여 API 경로를 활성화하고 기술적으로 React 프레임워크인 경우에도 선호하는 백엔드 언어를 사용할 수 있습니다. 바라건대, 당신은 그것을 올바르게 이해합니다.

지금까지 API Route가 무엇인지 알아보았습니다. 그러나 실제 질문은 남아 있습니다. 왜 Next.js를 사용하여 GraphQL 서버를 구축 합니까? GraphQL 또는 Node.js를 사용하여 그렇게 하지 않는 이유는 무엇입니까? 따라서 다음 섹션에서 Next.js API 경로를 API 구축을 위한 기존 솔루션과 비교해 보겠습니다.

Next.js API 경로 대 REST 및 GraphQL

GraphQL과 REST는 API를 구축하는 좋은 방법입니다. 그들은 매우 인기가 있으며 오늘날 거의 모든 개발자가 사용합니다. 그렇다면 API를 빌드하기 위해 React 프레임워크를 사용하는 이유는 무엇입니까? 글쎄, 빠른 대답은 API 경로를 사용하면 백엔드를 추가하여 Next.js 앱을 확장할 수 있기 때문에 Next.js API 경로가 다른 목적에 있다는 것입니다.

백엔드에 중점을 둔 Node.js, Express, GraphQL 등과 같은 API를 빌드하기 위한 더 나은 솔루션이 있습니다. 내 생각에 API 경로는 Next.js로 전체 스택 앱을 구축하기 위해 클라이언트 측과 결합되어야 합니다. API 경로를 사용하여 간단한 API를 빌드하는 것은 즉시 백엔드를 추가할 수 있는 React 프레임워크이기 때문에 Next.js의 기능을 충분히 사용하지 않는 것과 같습니다.

기존 Next App에 인증을 추가해야 하는 경우 사용 사례를 고려하십시오. Node.js 또는 GraphQL을 사용하여 처음부터 인증 부분을 빌드하는 대신 API 경로를 사용하여 앱에 인증을 추가할 수 있으며 이는 https://localhost:3000/api/your-file-name 엔드포인트에서 계속 사용할 수 있습니다. https://localhost:3000/api/your-file-name . API 경로는 서버 측 전용 번들이기 때문에 클라이언트 측 번들 크기를 늘리지 않습니다.

그러나 API 경로는 CORS(Cross-Origin Resource Sharing) 헤더를 지정하지 않기 때문에 Next.js API 경로는 동일한 출처 내에서만 액세스할 수 있습니다. API에 CORS를 추가하여 기본 동작을 계속 조정할 수 있지만 이는 추가 설정입니다. next export 를 사용하여 다음 앱을 정적으로 생성하는 경우 앱 내에서 API 경로를 사용할 수 없습니다.

지금까지 API Routes가 이와 같은 솔루션에 비해 더 나은 솔루션이 될 수 있는 경우를 배웠습니다. 이제 손을 더럽히고 GraphQL 서버 구축을 시작하겠습니다.

점프 후 더! 아래에서 계속 읽기 ↓

설정

Next.js로 새 앱을 시작하기 위해 Create Next App으로 이동합니다. Webpack으로 새 앱을 수동으로 설정할 수도 있습니다. 그렇게 하는 것을 환영합니다. 즉, 명령줄 인터페이스를 열고 다음 명령을 실행합니다.

 npx create-next-app next-graphql-server

Next.js는 API 경로에 대한 시작 템플릿을 제공합니다. 다음 명령을 실행하여 사용할 수 있습니다.

 npx create-next-app --example api-routes api-routes-app

이 자습서에서는 모든 것을 처음부터 수행하기를 원하므로 Create Next App을 사용하여 시작 템플릿이 아닌 새 앱을 시작합니다. 이제 다음과 같이 프로젝트를 구성합니다.

 ├── pages | ├── api | | ├── graphql.js | | ├── resolvers | | | └── index.js | | └── schemas | | └── index.js | └── index.js ├── package.json └── yarn.lock

앞서 말했듯이 api 폴더는 API 또는 서버가 있는 곳입니다. GraphQL을 사용할 것이기 때문에 GraphQL 서버를 생성하려면 리졸버와 스키마가 필요합니다. 서버의 끝점은 GraphQL 서버의 진입점인 /api/graphql 경로에서 액세스할 수 있습니다.

이 단계를 통해 이제 서버용 GraphQL 스키마를 생성할 수 있습니다.

GraphQL 스키마 생성

간단히 요약하자면 GraphQL 스키마는 데이터 그래프의 모양을 정의합니다.

다음으로 Next.js 내에서 Apollo Server를 사용하려면 apollo-server-micro 를 설치해야 합니다.

 yarn add apollo-server-micro

npm 의 경우

 npm install apollo-server-micro

이제 새로운 GraphQL 스키마를 생성해 보겠습니다.

api/schemas/index.js 에서

 import { gql } from "apollo-server-micro"; export const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { getUsers: [User] getUser(name: String!): User! }`

여기서는 Github 사용자의 모양을 설명하는 User 유형을 정의합니다. id 유형의 ID , login 및 String 유형의 avatar_url 이 필요합니다. 그런 다음 사용자 배열을 반환해야 하는 getUsers 쿼리의 유형을 사용합니다. 다음으로 getUser 쿼리를 사용하여 단일 사용자를 가져옵니다. 검색하려면 사용자의 이름을 받아야 합니다.

이 GraphQL 스키마가 생성되면 이제 리졸버 파일을 업데이트하고 위의 쿼리를 수행하는 함수를 생성할 수 있습니다.

GraphQL 해석기 만들기

GraphQL 리졸버는 GraphQL 쿼리에서 응답을 생성할 수 있는 함수 세트입니다.

Github API에서 데이터를 요청하려면 axios 라이브러리를 설치해야 합니다. 따라서 CLI를 열고 다음 명령을 실행합니다.

 yarn add axios

또는 npm 을 사용할 때

 npm install axios

라이브러리가 설치되면 이제 resolvers 파일에 의미 있는 코드를 추가해 보겠습니다.

api/resolvers/index.js 에서

 import axios from "axios"; export const resolvers = { Query: { getUsers: async () => { try { const users = await axios.get("https://api.github.com/users"); return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url })); } catch (error) { throw error; } }, getUser: async (_, args) => { try { const user = await axios.get( `https://api.github.com/users/${args.name}` ); return { id: user.data.id, login: user.data.login, avatar_url: user.data.avatar_url }; } catch (error) { throw error; } } } };

여기에서 볼 수 있듯이 이전에 GraphQL 스키마에 정의된 쿼리 이름을 리졸버 함수와 일치시킵니다. getUsers 함수를 사용하면 API에서 모든 사용자를 검색한 다음 User 유형을 미러링해야 하는 사용자 배열을 반환할 수 있습니다. 다음으로 getUser 메소드를 사용하여 매개변수로 전달된 이름의 도움으로 단일 사용자를 가져옵니다.

이제 GraphQL 스키마와 GraphQL 리졸버가 생겼습니다. 이제 이들을 결합하고 GraphQL 서버를 구축할 때입니다.

GraphQL 서버 생성

GraphQL 서버는 데이터를 GraphQL API로 노출합니다. 클라이언트 앱에 필요한 데이터만 요구할 수 있는 기능을 제공합니다.

api/graphql.js

 import { ApolloServer } from "apollo-server-micro"; import { typeDefs } from "./schemas"; import { resolvers } from "./resolvers"; const apolloServer = new ApolloServer({ typeDefs, resolvers }); export const config = { api: { bodyParser: false } }; export default apolloServer.createHandler({ path: "/api/graphql" });

ApolloServer 를 가져온 후 이를 사용하여 새 인스턴스를 생성한 다음 스키마와 리졸버를 전달하여 GraphQL 서버를 생성합니다. 다음으로, 들어오는 요청을 구문 분석하지 않도록 Next.js에 지시하고 GraphQL이 이를 처리하도록 해야 합니다. 마지막으로 apolloServer 를 사용하여 새 핸들러를 만듭니다. 즉, /api/graphql 경로가 GraphQL 서버의 진입점 역할을 할 것입니다.

일반 Apollo Server와 달리 Next.js는 서버 측 렌더링에 의존하기 때문에 서버 시작을 처리합니다. 그렇기 때문에 여기서 GraphQL 서버를 스스로 시작할 필요가 없습니다.

엄청난! 이 단계를 통해 이제 GraphQL 서버가 작동하는지 테스트할 수 있습니다.

GraphQL 서버 테스트

프로젝트의 루트를 찾아 CLI에서 연 후 다음 명령을 실행합니다.

 yarn dev

또는 npm 의 경우

 npm run dev

이제 https://localhost:3000/api/graphql 을 방문하여 아래 GraphQL 쿼리를 추가하여 Github에서 모든 사용자를 검색합니다.

 { getUsers { id login avatar_url } }

이 쿼리로 단일 사용자를 가져올 수 있는지 확인합시다.

 query($name: String!){ getUser(name:$name){ login id avatar_url } }

엄청난! 우리 서버는 예상대로 작동합니다. Next.js API 경로를 사용하여 GraphQL 서버 구축을 완료했습니다.

결론

이 튜토리얼에서는 먼저 Next.js API 경로가 무엇인지 설명하고 Next.js를 사용하여 GraphQL 서버를 구축하여 살펴보았습니다. Next.js 앱에 백엔드를 추가하는 기능은 정말 좋은 기능입니다. 이를 통해 실제 백엔드로 앱을 확장할 수 있습니다. 더 나아가 API 경로를 사용하여 완전한 API를 구축하기 위해 데이터베이스를 연결할 수도 있습니다. Next.js를 사용하면 API 경로를 사용하여 전체 스택 앱을 더 쉽게 구축할 수 있습니다.

CodeSandbox에서 완성된 프로젝트를 미리 볼 수 있습니다.

읽어 주셔서 감사합니다!

추가 리소스

이러한 유용한 리소스는 이 튜토리얼의 범위를 넘어설 것입니다.

API 경로 소개(Next.js 9)
Next.js API 경로
API 경로 미들웨어