JoDMsoluth / mogac_front

Next.js advanced starter with Apollo, TypeScript, I18n, Docker and more...

• What you get
  • Features
  • Developer experience
• Getting started
  • Start development server
  • Run tests
• Additional helpers
  • useAuth()
• Docker

What you get

Features

• Latest Next.js version.
• GraphQL Apollo client with built-in JWT authentication.
• Localization via react-i18next.
• Configured TypeScript environment.
• Configured Sass/SCSS via next-sass for styling (plus Normalize.css included).
• Built-in helpers.
• 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

Before start using project you have to unstall dependencies by running one of these commands:

# If you're using Yarn package mangaer:
yarn

# If you're using NPM package mangaer:
npm install

Tests

We are using Jest for testing. To run tests located in src/tests directory use test script from package.json:

yarn test

---

Pretty much everything you need to know you can find in Next.js documentation.

Additional helpers

useAuth() hook

This hook helps you to implement authentication. Here is an example how to use it:

import React from 'react';

import { useAuth } from './utils/auth';

const MyPage = () => {
  const [{ data }, logout] = useAuth();

  return (
    <div>
      {data ? (
        <div>
          <div>Hello, {data.me.name}!</div>
          <button onClick={logout}>Log out</button>
        </div>
      ) : (
        <div>Please sign in</div>
      )}
    </div>
  );
};

If you don't want to wrap whole application in authentication environment (for example, you may not want to do any authentication-based requests on /login page), you can use withAuth HOC on needed pages instead of using AuthProvider as global wrapper:

_app.tsx:

import React from 'react';
import App from 'next/app';

import { withApollo } from '../lib/apollo';
- import { AuthProvider } from '../utils/auth';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
-     <AuthProvider>
-       <Component {...pageProps} />
-     </AuthProvider>
+     <Component {...pageProps} />
    );
  }
}

export default withApollo(MyApp);

Any page that required authentication:

import React from 'react';
import { NextPage } from 'next';

- import { useAuth } from '../utils/auth';
+ import { useAuth, withAuth } from '../utils/auth';

const AuthenticationRequiredPage: NextPage = () => {
  const [{ data }] = useAuth();

  return <div>Hi, user with ID {data.me.id}!</div>;
};

- export default AuthenticationRequiredPage;
+ export default withAuth(AuthenticationRequiredPage);

Docker

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

docker-compose up --build