Nextjs Templates & Themes Logo Nextjs Templates & Themes
Nextjs Apollo Boilerplate screenshot

Nextjs Apollo Boilerplate

Author Avatar Theme by Caribjin
Updated: 18 Feb 2022
12 Stars

Next.js and Apollo-Client web application, designed for learning and real-world applicability.

Github Live Preview

Categories

React Styled components Chakra ui

Overview

The NextJs Apollo Boilerplate is a starter template for building applications using Next.js and Apollo. It includes various features and technologies commonly used in real-world projects, such as GraphQL, Redux, Chakra UI, Axios, and more. The boilerplate provides a foundation for developers to quickly start new projects with authentication, responsive layout, fetching and displaying data from SpaceX API, language support, and bundle analysis. It is built with Next.js, Chakra UI, Apollo, TypeScript, and other technologies.

Features

  • Authentication via OAuth: Supports authentication using Google and GitHub OAuth.
  • Dark/Light Theme: Provides a toggleable dark and light theme for the application.
  • Responsive Layout: Responsive layout that adapts based on different screen sizes.
  • Fetch and Display SpaceX Launches Data: Uses Apollo GraphQL to fetch and display data from SpaceX GraphQL APIs.
  • Support for i18n: Provides support for both English and Korean languages.
  • Maximize Lighthouse Score: Includes optimizations to maximize Lighthouse score for better performance.
  • Bundler Analyzer: Includes a bundler analyzer tool to analyze the application’s bundling.

Installation

To install the NextJs Apollo Boilerplate, follow these steps:

  1. Clone the repository.
git clone [repository_url]
  1. Install dependent packages using Yarn.
cd [project_folder]
yarn install

  1. Create a Google OAuth Client from Google Developers Console and obtain the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET. Paste the values into the .env file in the root folder.

  2. Create a GitHub OAuth Client from GitHub Developer Settings and obtain the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET. Paste the values into the .env file in the root folder.

Summary

The NextJs Apollo Boilerplate is a feature-rich starter template for building applications using Next.js and Apollo. It provides a strong foundation with authentication, theme toggling, responsive layout, fetching and displaying data, language support, and bundle analysis. The boilerplate is built with Next.js, Chakra UI, Apollo, TypeScript, and other technologies, making it a powerful tool for starting new projects. By following the installation guide, developers can quickly set up the boilerplate and customize it to fit their specific needs. With its comprehensive set of features and ease of use, the NextJs Apollo Boilerplate is a valuable resource for developers looking to jumpstart their Next.js and Apollo projects.