How to Create a Next.js App with GraphQL and Prisma in Simple Steps

In web development, the quest for efficiency, scalability, and robustness in full-stack applications is never-ending. The combination of Next.js, GraphQL, TypeScript, Prisma, and Vercel offers a powerful stack for developers aiming to build cutting-edge applications.

In this article, we will learn how to build a simple GraphQL server using Next.js, Prisma, and TypeScript. We will cover the basics of GraphQL, Prisma, and Next.js, and how to integrate them to create a full-stack application. By the end of this tutorial, you will have a solid understanding of how to set up a GraphQL server, define a Prisma schema, and fetch data using GraphQL queries within a Next.js framework.

Prerequisites

To follow along with this article, you need to have basic knowledge of JavaScript, React, and Node.js. Familiarity with Next.js, Prisma, and TypeScript is also essential. Ensure you have these tools installed on your machine to get started. If you haven’t already, you can install Next.js by running , Prisma by running , and TypeScript by running .

Setting up the Project

To set up environment variables, create a new file named in the root of your project. In this file, add the following variables:

Replace the , , , , and placeholders with your actual PostgreSQL database credentials.

The variable is crucial for connecting Prisma to your PostgreSQL database, while ensures your Next.js application can access the GraphQL API. This setup is essential for a smooth development experience, allowing your application to fetch data and interact with the database seamlessly.

Initializing a New Next.js Project

Kickstart your project by running the command in your terminal. This command scaffolds a new Next.js project, setting the stage for our full-stack application.

Installing Dependencies

Next, install the necessary dependencies by executing the following command:

These packages are essential for integrating GraphQL and Prisma into your Next.js application, providing the tools needed to define your database schema and GraphQL API.

Creating the Prisma Schema

The heart of your application's data model lies within the Prisma schema. Begin by creating a new file named . Here, define your database schema using the Prisma Schema Language (PSL), which allows for clear and concise modeling of your data. For instance:

This schema defines a simple model as an example. Don't forget to configure your database connection URL in the file to connect to your PostgreSQL database.

Generating the Prisma Client

With your schema defined, generate the Prisma client by running the following command:

Copy
1
npx prisma generate

This command creates a type-safe query builder that you’ll use to interact with your database, ensuring your data access is both efficient and error-free.

Data Modeling with Prisma

Designing your data model is a critical step in building your application. Prisma’s Schema Language makes this process intuitive and straightforward. After defining your models, use the following command to apply your database migrations:

Copy
1
npx prisma migrate dev

Adding Sample Data

To add sample data to your database, utilize Prisma Studio by running:

Copy
1
npx prisma studio

This graphical interface lets you easily insert and manage data, providing a visual representation of your database schema.

GraphQL API Setup

Overview of Setting Up a GraphQL Server

Integrating a GraphQL server into your Next.js application involves creating a schema that defines your API's data types and operations. In a graphql/schema.ts file, use the gql template literal to define your schema, like so:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
import { gql } from 'apollo-server-micro';

export const typeDefs = gql`
  type Query {
    users: [User!]!
  }

  type User {
    id: ID!
    name: String!
    email: String!
  }
`;

This schema outlines a simple query that fetches users from your database.

Implementing GraphQL Resolvers

Resolvers are functions that handle the logic for fetching the data for your GraphQL operations. In a graphql/resolvers.ts file, implement these functions, utilizing the Prisma client to interact with your database:

Copy
1
2
3
4
5
6
7
8
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export const resolvers = {
  Query: {
    users: async () => await prisma.user.findMany(),
  },
};

Implementing the GraphQL API

Setting up Apollo Server in your Next.js application is straightforward. Create a new file under pages/api/graphql.ts and configure your Apollo Server to use the schema and resolvers you've defined:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
import { ApolloServer } from 'apollo-server-micro';
import { typeDefs } from '../../graphql/schema';
import { resolvers } from '../../graphql/resolvers';

const apolloServer = new ApolloServer({ typeDefs, resolvers });
export const config = {
  api: {
    bodyParser: false,
  },
};

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

This setup enables your Next.js application to handle GraphQL requests, making your API accessible at /api/graphql.

Frontend Implementation

Creating a React component to display user data involves fetching data from your GraphQL API using a GraphQL client like Apollo Client. Implement a UserList component that queries the API and displays the results:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { useQuery, gql } from '@apollo/client';

const USERS_QUERY = gql`
  query Users {
    users {
      id
      name
      email
    }
  }
`;

export default function UserList() {
  const { data, loading, error } = useQuery(USERS_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.users.map((user) => (
        <li key={user.id}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
}

The Bottom Line!

Building a full-stack application with Next.js, GraphQL, TypeScript, Prisma, and Vercel offers a modern, efficient, and scalable approach to web development. By following the steps outlined in this tutorial, you've learned how to set up your project, model data with Prisma, implement a GraphQL API, and create a frontend interface to interact with your API. Remember to adhere to best practices for security, performance, and scalability to ensure your application is robust and reliable.