/serverless-nextjs-i18n-ssg-ssr-starter

A serverless-nextjs ready static and ssr starter project.

Primary LanguageJavaScriptMIT LicenseMIT

serverless-nextjs-i18n-ssg-ssr-starter

This started aims to bridge the gap for those getting started with Next.js v10 and serverless-nextjs. Although the thought of hosting with Vercel/Netlify is nice, for our requirements, hosting our own infrastructure is must. Thus, serverless-nextjs is the best option for hosting with AWS short of spinning up a server.

Features include:

  • i18next
    • Core i18next library
  • react-i18next
    • Used for the useTranslation hook
  • i18next-browser-languagedetector
    • Used to detect the users requested language.
  • react-bootstrap
    • An awesome react wrapper for the popular Bootstrap framework.
  • styled-components
    • Used to create simple styled components
  • react-styleguidist
    • Used for generating some documentation for your app components
  • Multi-env support
    • Like most projects, the need for a multi environment app is a must
    • Add environment variables to environments/.env.<BUILD_ENV_NAME>
    • Then run the deployment with BUILD_ENV=<BUILD_ENV_NAME> npx serverless

Clients will be directly redirected from / to /[lang] based on the detected language.

Installation

Clone the repository and then run yarn install

Configuration

  • Set the languages and the default language /src/i18n/config.js
  • Locales are located in /src/locales/
  • Before running BUILD_ENV=develop npx serverless you will need to configure serverless via --profile or simply exporting your AWS credentials.
  • Setup your environments

TODO

  • Implement localized routes when suport from Next.js is available.
  • Currently serverless-nextjs does not replace the public/sitemap.xml on deployment.
    • A workaround could be to use the AWS cli to delete the current sitemap.xml before deployment.

Deployment

The BUILD_ENV should correlate to an environments/.env.develop file, containing your NEXT_PUBLIC_SITE_URL at a minimum. This URL will be prepended to sitemap.xml entries and used as the root domain in next.config.js.

Multi-env

If you are deploying a multi-environment project (e.g staging/production versions of the app), you should utilise the deploy.sh script.

You need to create a separate S3 bucket for storing your multi-env .serverless cache folders.

Edit the deploy.sh script with the path to your s3 bucket.

Then you will be able to deploy your app using:

BUILD_ENV=develop ./deploy.sh

Single env

If you are only deploying to a single environment you could run:

BUILD_ENV=main npx serverless

Credits

Originally forked from github.com/Xairoo/nextjs-i18n-static-page-starter