next-advanced-apollo-starter

Advanced, but minimalistic Next.js and Apollo starter

What's included • Getting Started • Apollo usage • Writing tests • Docker usage

What's included

Features

Latest Next.js version.
Latest packages updates.
GraphQL Apollo client with built-in cookie-based JWT token authentication.
Localization via react-i18next.
TypeScript environment.
Normalize.css included.
No custom server.

Developer experience

Testing environment via Jest and @testing-library/react.
Prettier for code formatting.
Debug configuration for VSCode.
Docker configuration to serve production-ready build with Nginx.

Getting started

Start development server

In order to start development, you should run one of these commands:

npm install

After installation is complete, simply start development server:

npm run dev

Apollo usage

Client-side rendering (CSR)

import { gql, useQuery } from '@apollo/client';

const GET_CATS = gql`
  query GetCats {
    cats {
      id
      breed
    }
  }
`;

const MyPage = () => {
  const { loading, data } = useQuery(GET_CATS);

  if (loading) {
    return <div>Loading...</div>;
  }

  return <div>{JSON.stringify(data)}</div>;
};

export default MyPage;

Server-side rendering (SSR)

import { gql } from '@apollo/client';
import { initializeApollo, addApolloState } from '../lib/apollo';

const GET_CATS = gql`
  query GetCats {
    cats {
      id
      breed
    }
  }
`;

const MyPage = (props) => {
  return <div>{JSON.stringify(props.data)}</div>;
};

export async function getServerSideProps() {
  const apolloClient = initializeApollo();

  const { data } = await apolloClient.query({
    query: GET_CATS,
  });

  return addApolloState(apolloClient, {
    props: {
      data,
    },
  });
}

export default MyPage;

Writing tests

Jest is a great tool for testing. To run tests located in /tests directory, use test script from package.json:

npm test

Pretty much everything you need to know about project structure, SSR, etc., you can find in the official Next.js documentation.

Docker usage

To build and run Dockerized production-ready container, run:

docker-compose up --build

StevenMarrocco/next-advanced-apollo-starter