Next Apollo Joy Starter

Next Apollo Joy Starter is a free, open-source boilerplate for building fully typed Next.js applications with Apollo GraphQL and MUI's Joy UI component library. Created by Tim Mikeladze, it bundles a full GraphQL server and client, authentication, localization, PWA support, and a complete development workflow so you can start a project without extra configuration.

What is Next Apollo Joy Starter?

It is a slightly opinionated starter kit for Next.js apps. It takes a fresh clone (via npx degit TimMikeladze/next-apollo-joy-starter) and outputs a project with an Apollo Client and Apollo Server API at /api/graphql, type-safe GraphQL operations, Joy UI components, and a suite of preconfigured tools. It runs on Next.js, can be deployed anywhere Next.js runs (Vercel suggested), and includes GraphQL Codegen and Zeus for end-to-end TypeScript coverage of every query and mutation.

Key Features

• Full-stack GraphQL — Apollo Client and Apollo Server integrated; visit localhost:3000/api/graphql to open Apollo Sandbox for schema exploration and query testing.
• End-to-end TypeScript type safety — GraphQL Codegen and Zeus generate types for all GraphQL operations, covering both client and server.
• Joy UI components — MUI's Joy UI (a library of React UI components) with a one-click dark mode toggle; the README notes Joy UI can be swapped for Tailwind CSS with minimal effort.
• NextAuth.js authentication — Preconfigured auth solution built for Next.js and Serverless; ready to wire up providers.
• PWA output — next-pwa with Workbox is configured out of the box; adding manifest files and image assets makes a production-ready progressive web app.
• Localization and SEO — i18next for translations and Next SEO for metadata management.
• Dev and test tooling — Storybook for isolated component development, Jest preconfigured for TypeScript/JSX, ESLint, Prettier, lint-staged, and Husky.
• Automation — GitHub Actions runs tests on every commit; release-it creates semantic version tags and GitHub Releases; Renovate sends automated dependency-update pull requests.

Who is it for?

• Full-stack TypeScript developers who want a preconfigured GraphQL + Next.js setup with type safety on both client and server.
• Startup teams building a PWA with auth, i18n, and SEO out of the box.
• Solo developers who want to skip configuration and focus on core features.
• Developers who value CI/CD — it comes with GitHub Actions for tests and release automation.

What can you do with it?

• Prototype an authenticated app: clone, run yarn dev, and you have a Next.js app with a GraphQL API, auth, and UI components immediately.
• Build a progressive web app: use the included next-pwa setup, add your manifest and icons, and make your app installable.
• Develop components in isolation: start Storybook and build/test UI without running the full app.
• Analyze bundle size: run yarn build:analyze to inspect page bundles with next-bundle-analyzer.

How does it work?

Get started by cloning the repo with npx degit TimMikeladze/next-apollo-joy-starter my-app (this removes the .git folder, LICENSE.md, and README.md), then run git init, yarn, and yarn dev. The project uses Yarn by default; to use another package manager, delete yarn.lock and replace every yarn occurrence in the project. Committing is handled by yarn commit, which also runs lint-staged on staged files, and yarn release triggers release-it to publish tagged releases.

FAQ

Is Next Apollo Joy Starter free?

Yes, this is an open-source starter kit. You can clone it with npx degit and use it for personal or commercial projects. The repository includes a LICENSE.md file (removed when using degit).

Does it require Yarn?

The project is documented with Yarn commands. To use npm or pnpm, remove the yarn.lock file and find-and-replace yarn in the project with your package manager of choice.

How do I deploy it?

Since it is a Next.js app, it can be deployed anywhere Next.js runs. The README suggests Vercel with the GitHub integration for quick production deploys; you can also run yarn build for a local production build.

Can I replace Joy UI with Tailwind?

Yes. The README states that Joy UI can be replaced with Tailwind CSS with minimal effort while keeping the rest of the starter kit intact.

What is the GraphQL endpoint?

The Apollo Server is mounted at /api/graphql. When running yarn dev, Apollo Sandbox is available at localhost:3000/api/graphql in your browser for experimenting with queries and schema.