[Next.js] basePath should be / when using a custom URL

[TimPietrusky]

When configuring a custom domain for a repository, the basePath for a Next.js app should not include the name of the repo as the root of the website is just /.

Steps to reproduce

• Configure a custom URL for a repo in Settings > Pages > Custom Domain
• Deploy the next-app using actions/configure-pages@v3
• See that none of the resources (like CSS or JS) can be loaded as the basePath is set to reponame

Workaround

To still keep the "disable image optimisation"-option, I forked this action and removed the basePath config, but that is not optimal.

Suggestion

• Make the basePath configurable and when nothing is configured, it's using the reponame, but a user could overwrite it with / if they want to
• Update the comment in the provided workflow (nextjs.yml) to make sure that user know that this can be done (but I guess this is not the scope of this repo, pease let me know where this should be fixed)

[JamesMGreene]

Thanks for the report, @TimPietrusky!

Do you happen to have a public repo available where you're running into this issue? 🤔 We haven't seen this behavior ourselves as far as I know, but definitely open to expanding our internal end-to-end tests if we're missing something. 👍🏻

• Update the comment in the provided workflow (nextjs.yml) to make sure that user know that this can be done (but I guess this is not the scope of this repo, pease let me know where this should be fixed)

The Next.js starter workflow template that GitHub suggests can be found in the actions/starter-workflows repo:
actions/starter-workflows@pages/nextjs.yml

[JamesMGreene]

One debugging step that would also help is to check what Pages site URL is being detected by the Action. This would help narrow down if the issue is in the values returned by the Pages REST API, a bug in our injection code, or some incompatibility between your Next.js config and our injection code.

To debug, update your Actions workflow with a few changes like the following:

      # Find your existing step for this, then add an `id` property
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
        with:
          static_site_generator: next
      - name: Dump Pages configuration
        run: |
          echo PAGES_BASE_URL:  ${{ steps.pages.outputs.base_url }}
          echo PAGES_ORIGIN:    ${{ steps.pages.outputs.origin }}
          echo PAGES_HOST:      ${{ steps.pages.outputs.host }}
          echo PAGES_BASE_PATH: ${{ steps.pages.outputs.base_path }}

Although I'd like to fix whatever issue you're running into, it's probably also worth mentioning that you could probably use the aforementioned outputs values as a short-term workaround to, say, set environment variables for the duration of the workflow run that could then be used within your next.config.js when building/exporting your Next.js site. 💡

[REDDOT007]

ok

[TimPietrusky]

@JamesMGreene thanks for your message!

The public repo where I was running into this is: https://github.com/iieinander/iieinander.band

Is there anything else that you need?

[JamesMGreene]

@TimPietrusky What I'm seeing in your Actions logs would suggest that the basePath is being set to "", which is the expected value for Next.js when there isn't any notable base path (trailing slashes are excluded). 🤔

https://github.com/iieinander/iieinander.band/actions/runs/4173980364/jobs/7226978361#step:5:58

Extra line breaks added for legibility:

Found configuration object in indirect module export
Injection successful, new configuration:
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {unoptimized: true},
  experimental: {images: {unoptimized: true}},
  basePath: "",
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = nextConfig;

[TimPietrusky]

@JamesMGreene yes, this is true, but only because I'm using my fork. When I used the original action, the basePath was set:

https://github.com/iieinander/iieinander.band/actions/runs/4166191535/jobs/7210202546#step:5:58

const nextConfig = {
  images: {unoptimized: true},experimental: {images: {unoptimized: true}},basePath: "/iieinander.band",reactStrictMode: true,
  swcMinify: true,
};

In my fork TimPietrusky@f294021, I commented out the basePath, so it's never set.

[tyliec]

Noting that we ran into this same issue at https://github.com/CodeWithAloha/CWAWebsite, more info at CodeWithAloha/website#51