til

Today I Learned: collection of notes, tips and tricks and stuff I learn from day to day working with computers and technology as an open source contributor and product manager

View project on GitHub

Next.js

No Cache Detected

Next.JS is bit heavy so using a build cache is recommended.

Since we use GitHub Actions and the official action from GitHub, we are good to go.

This little snippet does all the magic:

uses: actions/cache@v4
with:
  # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
  path: |
    ~/.npm
    $/.next/cache
  # Generate a new cache whenever packages or source files change.
  key: $-nextjs-$-$
  # If source files changed but packages didn't, rebuild from a prior cache.
  restore-keys: |
    $-nextjs-$-

It takes care of building the cache and using the cache.

Building an SPA for deployment to AWS S3

If you want to build an SPA for deployment to AWS S3 and AWS CloudFront

Add the following to: next.config.ts

output: 'export',

So it resembles something along the lines of:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: 'export',
};

export default nextConfig;

Then the build step will output a folder named out/ which contain production optimized artifacts that can easily be deployed to AWS.

Resources and References