Next.js advanced starter with Apollo, TypeScript, I18n, Docker and more...
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