next-advanced-apollo-starter

Advanced, but minimalistic Next.js and Apollo starter

What's included • Getting Started • Apollo usage • Testing

What's included

Features

• Latest Next.js version with App Router.
• GraphQL Apollo client with @apollo/client-integration-nextjs.
• Works with React Server Components and React Client Components (with or without SSR).
• TypeScript environment.
• Normalize.css included.
• No custom server.

Developer experience

• Testing environment via Vitest and @testing-library/react.
• Configured GraphQL Code Generator.
• Prettier for code formatting.
• ESLint for linting.

Getting started

Prerequisites

• Node.js 18.x or later
• npm (or yarn/pnpm)

Installation

1. Clone the repository:

git clone [email protected]:nikitowsky/next-advanced-apollo-starter.git
cd next-advanced-apollo-starter

2. Install dependencies:

npm install

3. Create a .env.local file with your GraphQL endpoint:

# Example URI, use link to your GraphQL API
NEXT_PUBLIC_GRAPHQL_URI=https://graphqlzero.almansi.me/api

4. Start the development server:

npm run dev

For more information, see Next.js documentation.

GraphQL Code Generation

Generated interfaces for co-located .graphql files. See the example.

To generate TypeScript interfaces based on GraphQL schema and used queries/mutations:

npm run codegen

Apollo usage

• React Server Components (RSC) example
• React Client Components (RCC) example

Testing

This project uses Vitest for testing. To run tests:

npm run test

For more about project structure, React Server Components (RSC), React Client Components (RCC), etc., see the official Next.js documentation.