Not working when Index.js is existed about next-multi-host HOT 12 CLOSED

What do your rewrite rules look like?

Do you include the root...

{
  has: [
    {
      type: 'host',
      value: '(?<host>.*)',
    },
  ],
  source: '/',
  destination: '/hosts/:host',
},

from next-multi-host.

@acorcutt Thank you for your reply. What do you mean about include the root ?
This is my rule:

[
      {
        has: [
          {
            type: "host",
            value: "(?<host>.*)",
          },
        ],
        source: "/",
        destination: "/hosts/:host",
      },
      {
        has: [
          {
            type: "host",
            value: "(?<host>.*)",
          },
        ],
        source: "/:slug*",
        destination: "/hosts/:host/:slug*",
      },
    ]

from next-multi-host.

I meant the root path '/' needs rewriting to avoid any default '/index.js' route but that looks ok.

This looks like it is related to #1 with the '/' and '/:slug*' routes both matching '/' try avoiding wildcards if possible or place them in sub-paths like '/pages/:slug*.'

from next-multi-host.

I wonder if we can make the '/:slug*' not match the '/' route using a regex match maybe try something like source: "/:slug(.*)"

from next-multi-host.

@acorcutt still no luck. I put all rules inside the beforeFiles and when I access localhost:300, no response, just loading.

beforeFiles: [
      {
        has: [
          {
            type: "host",
            value: "(?<host>.*)",
          },
        ],
        source: "/",
        destination: "/hosts/:host",
      },
      {
        has: [
          {
            type: "host",
            value: "(?<host>.*)",
          },
        ],
        source: "/:slug(.*)",
        destination: "/hosts/:host/:slug*",
      },
    ]

from next-multi-host.

Can you remove the index route and just use the slug route to catch it?

beforeFiles: [
      {
        has: [
          {
            type: "host",
            value: "(?<host>.*)",
          },
        ],
        source: "/:slug*",
        destination: "/hosts/:host/:slug*",
      },
    ]

Then check for context.params.slug == "" in '/hosts/:host/[[...slug]].js' for index?

In my example '/slugs/:slug*' matches both '/slugs' and '/slugs/a/b/c'

from next-multi-host.

@acorcutt I just update the rule to follow your suggestion but when I access localhost:3000, it's just loading. Look like an infinite loop. Out of memory occurs FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

from next-multi-host.

This is working for me: https://stackblitz.com/edit/nextjs-s8pmir

I had to rename '[[...slug]].js' to '[...slug].js' and added 'index.js' as its own page.

from next-multi-host.

@acorcut sorry for unclear information. I mean the root index.js file in pages folder

from next-multi-host.

Ok I see... this is going to conflict with your rewrites:

/index.tsx and source: "/" & source: "/:slug*" rewrites will all match '/', /dashboard.tsx would also match source: "/:slug(.*)"

You need to avoid any overlapping routes such as placing your slugs rewrite under its own path source: "/slugs/:slug*" if that is possible. You could try a regex to prevent it matching the other routes but I've had no luck with them. I don't think using beforeFiles or afterFiles helps in this situation.

I have a site with a similar structure to this and ended up splitting it into two separate apps so one app handles a single/host/[...slug] catch-all route and the other a dashboard which uses its own sub domain.

from next-multi-host.

@acorcutt very appreciate for your help. Ya, I think splitting into 2 apps is necessary.
once again, thank you.

from next-multi-host.

No problem, I'll close this and leave #1 open - not sure can fix with how the current routing and rewrites are ordered.

from next-multi-host.