Next.JS

Recipe Features Explained

Let's breakdown the recipe to deploy a new Next.js site.

See Full Deployment Script

source: clear
features:
- node lts
nginx:
  root: public_html/public
  passenger:
    enabled: 'on'
    app_start_command: env PORT=$PORT yarn start
  locations:
    - match: /_next/static/
      alias: public_html/.next/static/
commands:
  - yes "" | yarn create next-app .
  - yarn build

source: clear
features:
- node lts
commands:
  - yes "" | yarn create next-app .

This script clears ~/public_html and installing the latest Node LTS version and creates a new blank nexjs project via yarn create.

When you upload an existing next.js project, the yarn create part is omitted.

nginx:
  root: public_html/public
  passenger:
    enabled: 'on'
    app_start_command: env PORT=$PORT yarn start
  locations:
    - match: /_next/static/
      alias: public_html/.next/static/

This script declare NGINX Configuration. It means two thing:

1. root: public_html/public means all static files are put to public folder. This is the recommended way to serve Nextjs for reverse proxy like NGINX.

2. env PORT=$PORT yarn start means run yarn start for all requests that doesn't found in public_html/public.

3. alias: public_html/.next/static/ for match: /_next/static/ means to speedup static files so they get proper cache and etag headers.

commands:
  - yarn build

This script compiles the frontend required before serving with production settings.

Using Next-Auth

Add these envar to your .env

commands:
- echo AUTH_SECRET=$(openssl rand -base64 33) >> .env
- echo AUTH_TRUST_HOST=true >> .env