Top 5 GraphQL Resources for Next.js Developers in 2021

GraphQL is stepping in to the 6th year in 2021 and is seeing great adoption in the developer community. We have compiled a short list of 5 best resources (in no particular order) specifically catering to Next.js developers, since it’s one of the most popular frontend frameworks in the community.

The list broadly focuses on the categories like GraphQL clients, data fetching, authentication, API routes in Next.js and Serverless.

1. GraphQL Clients

Apollo Client

urql

SWR

Relay

Fluent GraphQL Clients

2. Data Fetching

Server side rendering (SSR)

Static Export

Dynamic (Client side rendering and SSR)

Videos on Data Fetching

3. Authentication

  • Use static generation to server-render a loading state, followed by fetching user data client-side.
  • Fetch user data server-side to eliminate a flash of unauthenticated content.

Based on this, if you are going for an approach with your own database, there is an open source library called next-auth that takes care of storing user and session data in db. Read more about Next.js JWT Authentication with next-auth. There's an equivalent live stream that we did as a follow up.

There’s also a community created boilerplate app for next-auth and Hasura: next-hasura-boilerplate by Nirmalya Ghosh.

Auth0

If you are using Firebase, you can use the static generation pattern.

4. API Routes

There are two ways to approach this. One is to create a GraphQL Server inside of Next.js and it becomes serverless by default. Voila! The other option is to create the typical serverless function, write your logic and map it to GraphQL types using Hasura Actions.

5. Serverless

  • herm.dev is a free online workshop on everything you need to build fullstack GraphQL apps with Hasura, Next.js, and Serverless by Christian Nwamba. It is modelled on the 3factor app architecture.
  • Next.js API Routes are deployed as Serverless functions and enjoys the benefit of scale and costs.

Also read more on how a Django app architecture was migrated to Next.js Serverless architecture, saving dollars in the process. Migrating Django to Serverless with Next.js by Alan Balja.

Let us know in the comments on what your favorite Next.js + GraphQL resource for 2021 :)

Originally published at https://hasura.io on February 15, 2021.

⚡️ Instant realtime GraphQL APIs! Connect Hasura to your database & data sources (GraphQL, REST & 3rd party API) and get a unified data access layer instantly.