Redirect with basepath

Support
,
1

Hi!

This is my site I’m inquiring about: dainty-blancmange-21f6f7. It uses Next.js.

Here’s what I’m trying to do which works on local but not on Netlify. I have set the basepath to “/comeback” in my next.config.js but I also want any requests to / to redirect to /comeback. Here’s the full code:

module.exports = {
    basePath: '/comeback',
    //assetPrefix: '/comeback/', // assetPrefix requires the trailing slash
    async redirects() {
        return [
            {
                source: '/',
                destination: '/comeback',
                basePath: false,
                permanent: true
            }
        ]
    }
  }

This solution works just fine on local. When I go to /, I get redirected to /comeback. No luck on Netlify. I’ve tried to add a _redirects file with:

/       /comeback

and a netlify.toml file with :

[[redirects]]
  from = "/"
  to = "/comeback"
  status = 301
  force = true

But going to https://dainty-blancmange-21f6f7.netlify.app/ shows a 404 instead of redirecting to:
Create Next App.

Thanks in advance for your help!
Dan

2

Hi @Dan_Pearce, thanks for the post.
Kindly remove the netlify.toml and _redirects file and then change your next.config.js file to look like the code below.

module.exports = {
    basePath: '/comeback',
    async redirects() {
        return [
            {
                source: '/',
                destination: '/comeback',
                basePath: false,
                permanent: false
            }
        ]
    }
};

Redeploy the changes and let me know the outcome.

Thanks.

3

Hi @clarnx!

Thanks for your reply. Unfortunately, that did not resolve the issue. I’m still seeing a 404 message when I go to https://dainty-blancmange-21f6f7.netlify.app/

Thanks,
Dan

4

Hi @Dan_Pearce, thanks for the reply.
If possible can you share the link to your repository for me to help with the debugging.

5

Hi @clarnx!

I’m not allowed to make our repos public, unfortunately, but it’s just a starter project from Next.js that I modified to use Netlify forms.

Here’s the contents of my page.js file:

import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.center}>
        <Image
          className={styles.description}
          src="/next.svg"
          alt="Next.js Logo"
          width={180}
          height={37}
          priority
        />
      </div>

      <div>
          <h2>
            Home Form <span>-&gt;</span>
          </h2>
          <p>Let&apos;s do a form!</p>
          <form
            name="homeform"
            method="POST"
            action="/comeback/contact"
            data-netlify="true"
          >
        <input type="hidden" name="form-name" value="homeform" />
            <label htmlFor="name">Name *</label>
            <input
              id="name"
              name="name"
              required
              type="text"
            />
            <label htmlFor="message">Message *</label>
            <textarea id="message" name="message" required></textarea>
            <button type="submit">Submit</button>
          </form>
      </div>
    </main>
  )
}

Thanks!
Dan

6

Hi @Dan_Pearce, thanks for sharing the information.
However kindly explain what you actually want to achieve.

Initially you stated you wanted to set the base path and also redirect requests to / to redirect to /comeback

The second code snippet you shared containing Netlify forms does not explain what you actually want to achieve with regards to what you wanted to do initially.

Thanks.

7

I’m having a similar issue (Nextjs with basePath) where essentially basePath works on local dev and build but not on netlify.
It might be the same issue maybe?

8

Hi,

I shared that page code because that’s the only thing that really differs from the default next.js code in create-next-app aside from the code you gave me in next.config.js. I thought sharing this code would be helpful since I cannot share the entire repository. I apologize if it led to confusion.

What I want to achieve has not changed. I would like to set the basepath to /comeback and have any requests to / redirect to /comeback and not return a 404.

Thanks!
Dan

9

Hi @Dan_Pearce, thanks for the feedback. It would be difficult for me to help without looking at some code.
However I suggest you take a look at the stackoverflow thread below as it is related to your situation in order to see if it helps.

Also take a look at the Netlify documentation page below if you have not done so already. It contains information that will guide you especially regarding root-level rewrites taking precedence over Next.js Runtime’s generated rewrites which breaks routing on your site.

Thanks.

10

Hi Clarnx!

This issue is resolved for us now after creating a brand new Next.js site and adding this to our netlify.toml:

[[redirects]]
  from = "/"
  to = "https://URL.com/"
  status = 302
  force = true

And also setting LEGACY_FALLBACK_FALSE=true in the build environment variables (not sure if that does anything to resolve it but I wanted to include it in case it does).

Thanks!
Dan

1 Like
11

Glad to hear it! Thanks so much.

1 Like
12

Hi @Dan_Pearce, thanks for sharing how you resolved your problem.
I appreciate it.