sample next.js app

https://sample-next-app.fabrique.social.gouv.Fr

A sample SSR Next.js app with :

• ✅ sentry
• ✅ matomo
• ✅ jest tests
• ✅ @SocialGouv linters
• ✅ @SocialGouv bootstrap
• ✅ precommit hooks
• ✅ docker-compose for local dev
• ✅ socialgouv github actions

Development

Start hasura and local postgres using

docker-compose up

Hasura migrations and metadata will be automatically applied.

to launch the Hasura console, you can run the command

hasura console --envfile ../.env --project hasura

And then launch the frontend (next.js app) using

yarn dev

Production

Env vars

⚠ You need to set client-side browser process.env variables at build time.

In docker this is done with --build-arg.

Var	desc
PORT	port to run the server on
NEXT_PUBLIC_SENTRY_DSN	DSN of your sentry project
SENTRY_TOKEN	token to allow sourcemaps
NEXT_PUBLIC_MATOMO_URL	URL to your matomo instance
NEXT_PUBLIC_MATOMO_SITE_ID	site id on matomo instance

Docker build

docker build . -t sample-next-app

Docker run

docker run -it --init --rm -p 3000:3000 sample-next-app

Tips

• 3rd party libs (ex: some of @sindresorhus modules) may not be ES3 compatible (breaks IE11) and wont be babelified by Next.js. You can locally import the code, make a PR to the upstream project to publish babelified version or use next-transpile-modules
• 3rd party libs may needs to be fixed to handle SSR correctly
• Follow https://github.com/zeit/next.js/tree/canary/examples/