Unable to automatically determine the location of static site files. with new Next.js app

[hamirmahal]

The instructions at https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md#configure-lighthouse-ci don't seem to work "out-of-the-box" with a Next.js application created today using npx create-next-app@latest.

[hamirmahal]

https://github.com/hamirmahal/Lighthouse-CI-with-Next.js-and-TypeScript/actions/runs/5871667159/job/15921591136 reproduces the issue.

[wigqueel]

any update on this?

[hamirmahal]

I haven't heard anything back from the team.

[hamirmahal]

@wigqueel I haven't yet tried it out myself, but the answer @tannerdolby just posted looks very thorough.

[tannerdolby]

@hamirmahal Feel free to mark this discussion has answered if my response below resolved things for you! I tested out both the available options, using a custom server with Next.js + TypeScript out of the box and by enabling static exports in the next.config.js to generate a build folder like out which can then be automatically recognized by Lighthouse CI.

[hamirmahal]

@tannerdolby I've had my hands full with other priorities so I haven't been able to test what you mentioned in your response myself. I'll mark it as the answer, and if anyone has clarifying questions they're welcome to ask them. Thank you for the detailed post!

[tannerdolby]

@hamirmahal We have two options:

1. Configure a custom server in lighthouserc.js to tell Lighthouse CI where the production-like assets from Next.js can be located
2. Enable static exports in Next.js to create a build folder such as out which Lighthouse CI will automatically determine and use when running the CI GitHub Action

Custom Server

We need to tell Lighthouse CI where the "custom server" e.g. the Next.js application is serving the production-like assets. This can be handled by updating lighthouserc.js:

module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000/'],
      startServerCommand: 'npm run start',
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

See modifications for sites with a custom server. This step is necessary because Next.js is generating HTML files per route, and its not exactly a "static site" without using something like Next's static exports.

Static site or providing a build directory to Lighthouse CI

If you enable static exports, when running npm run build Next.js will create an out folder containing the production-like assets which Lighthouse CI will automatically recognize when looking for the build directory. You could also optionally specify a staticDistDir in the Lighthouse CI config for the build directory if you choose to name it something not included in the recognized build directories.

// next.config.js
const nextConfig = {
    output: 'export',
}

module.exports = nextConfig

Why does the GitHub Action fail "out of the box"?

In your example action run, it fails because Lighthouse CI is expecting a build folder containing production-like assets: dist, _site, out, public, etc or a custom server configured. I believe this is expected behavior since we aren't telling Lighthouse CI where to find the application files. Here is where the error is thrown: https://github.com/GoogleChrome/lighthouse-ci/blob/main/packages/cli/src/autorun/autorun.js#L68-L87

Successful Lighthouse CI GitHub Action with Next.js + TypeScript

I used npx create-next-app@latest and grabbed the GitHub Action workflow file provided from the Lighthouse CI docs and the action runs successfully when using a custom server and when using Next.js with static exports:

• (custom server): https://github.com/tannerdolby/lighthouse-ci-nextjs-ts/actions/runs/6635774870/job/18027235105
• (static exports): https://github.com/tannerdolby/lighthouse-ci-nextjs-ts/actions/runs/6648783212/job/18066291578