- 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.
- 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.
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
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.
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);
To build and run Dockerized production-ready container, run:
docker-compose up --build