Setting up a new Next.js project

This document is steps to initiate a Next.js-based setup with our own opinionated Eslint rules and prettier configuration, hosted on Google App Engine.

It's pretty basic, so that the project can grow into something more advanced if needed.

Step 1 – Add default Next.js boilerplate

Adds the latest version of a Next.js boilerplate, the Typescript version.

yarn create next-app --typescript

Step 2 – Add Prettier configuration

@cobraz/prettier is a small opinionated Prettier configuration. Prettier is de-facto code styling software in the industry by now, and this is just a small config that fits most needs.

yarn add -D prettier @cobraz/prettier

You need to add "prettier": "@cobraz/prettier" to package.json; if there are an existing Prettier file, you'll need to delete that.

Step 3 – Add eslint configuration

@bjerk/eslint-config is a opinionated eslint config, maintained by Bjerk.

yarn add -D @bjerk/eslint-config

Edit "extends" in .eslintrc.json. Append "@bjerk/eslint-config" before whatever is there.

Step 4 – Deploy to AppEngine

So, there's a thing to notice right away. Next.js is a React framework that has a backend (API). Even though Next.js supports exporting the application, meaning it becomes fully static (no backend), it's more work to set that up – so we're not doing that. AppEngine gives us the ability to host our application as Next.js would have it by default.

Let's start with AppEngine Standard Environment, which is probably fine for hosting a Next.js service. Standard environment is sort of a default environment; it has less customization (e.g. no support for a custom Dockerfile), but easier to use and cheaper.

Let's start with an example app.yaml:

env: standard
runtime: nodejs16
service: default

handlers:
  - url: /.*
    secure: always
    script: auto

Let's explain a few things. Setting env: standard sets it to use standard environment. Node version 16 is set by runtime: nodejs16; you can find all information about runtimes on their website.

service: default defines which service this is. AppEngine can have multiple services deployed on the same AppEngine project.

The handlers element provides a list of URL patterns and descriptions of how they should be handled.

To test this setup, you can run the following command, given that you've got access to the AppEngine project.

gcloud app deploy app.yaml --promote

Step 5 – Build systems

Google Service Account credentials.

A prerequisite of setting up a build system is setting up credentials in Github Actions, which are stored in Secrets. The credentials probably need to be configured in the infra repository (with Pulumi code).

Below, you'll find a pretty modern deploy to App Engine workflow. It a gcloud setup, caching Node (incl. node_modules) and running the equivalent of gcloud app deploy but with a specialized Github Action script.

name: Deploy to App Engine
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: google-github-actions/[email protected]
        with:
          credentials_json: ${{ secrets.GOOGLE_PROJECT_SA_KEY }}
      - uses: actions/setup-node@v2
        with:
          node-version: 16
          cache: yarn
      - uses: actions/cache@v2
        name: Cache Next.js folder (.next/cache)
        with:
          path: ${{ github.workspace }}/.next/cache
          key:
            ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{
            hashFiles('**.[jt]s', '**.[jt]sx') }}
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
      - run: yarn install
      - run: yarn build
      - uses: google-github-actions/[email protected]