How to use dynamic route with home page?

Answered

Somali posted this in #help-forum

SomaliOP

2023-08-28T12:46:46.000Z

My whole site consists of different blocks and in fact the main page is also a dynamic route for example [slug].js

Before that, I created index.js for the main page and [slug].js for the rest of the pages, but I realized that I was just copying the code of these two pages into each other, except for one detail.

I removed index.js and left only [slug].js, now my main page is only accessible via /home , which of course doesn't suit me.

I wrote this in next.config.js

 async rewrites() {
        return [
            {
                source: '/:locale/home',
                destination: '/:locale',
            },
        ];
    }

this removed the page from /home but it didn't appear on /, what am I doing wrong?

Answered by joulev

sorry i don't know what's wrong here

View full answer

21 Replies

@Somali My whole site consists of different blocks and in fact the main page is also a dynamic route for example [slug].js Before that, I created index.js for the main page and [slug].js for the rest of the pages, but I realized that I was just copying the code of these two pages into each other, except for one detail. I removed index.js and left only [slug].js, now my main page is only accessible via /home , which of course doesn't suit me. I wrote this in next.config.js async rewrites() { return [ { source: '/:locale/home', destination: '/:locale', }, ]; } this removed the page from /home but it didn't appear on /, what am I doing wrong?

joulev

2023-08-28T15:01:09.000Z

async rewrites() {
        return [
            {
                source: '/:locale',
                destination: '/:locale/home',
            },
        ];
    }

i think you meant this? this should work

@joulev js async rewrites() { return [ { source: '/:locale', destination: '/:locale/home', }, ]; }

SomaliOP

2023-08-28T15:01:53.000Z

i also try this, but this not working, i guess cuz next.js require index.js file?
i cant npm run build without index.js

joulev

2023-08-28T15:02:49.000Z

no nextjs doesn't require it

have you tried optional catch-all segments? does it work for your case?

@joulev have you tried optional catch-all segments? does it work for your case?

SomaliOP

2023-08-29T01:32:40.000Z

sorry i cant understand how it works
i have error Error: A required parameter (slug) was not provided as an array received string in getStaticPaths for /[[...slug]]

with this

@Somali sorry i cant understand how it works i have error Error: A required parameter (slug) was not provided as an array received string in getStaticPaths for /[[...slug]] with this

joulev

2023-08-29T01:41:00.000Z

console.log the paths before the entire function getStaticPaths returns, what do you get

@joulev `console.log` the `paths` before the entire function `getStaticPaths` returns, what do you get

SomaliOP

2023-08-29T01:42:16.000Z

@Somali Click to see attachment

joulev

2023-08-29T01:43:38.000Z

.flat it one more time

@joulev `.flat` it one more time

SomaliOP

2023-08-29T01:45:04.000Z

paths or item.alias?

@Somali paths or item.alias?

joulev

2023-08-29T01:46:25.000Z

whatever that you console logged. the object returned by getStaticPaths must be

{
  paths: [
    { params: { slug: ["array", "of", "string"] }, locale: "en" },
    { params: { slug: ["array", "of", "string"] }, locale: "en" },
    { params: { slug: ["array", "of", "string"] }, locale: "en" },
    { params: { slug: ["array", "of", "string"] }, locale: "de" },
    { params: { slug: ["array", "of", "string"] }, locale: "de" },
    { params: { slug: ["array", "of", "string"] }, locale: "de" },
    { params: { slug: ["array", "of", "string"] }, locale: "tr" },
    { params: { slug: ["array", "of", "string"] }, locale: "tr" },
    { params: { slug: ["array", "of", "string"] }, locale: "tr" },
  ],
  fallback: ...
}

not

{
  paths: [
    [
      { params: [...], locale: "en" },
      { params: [...], locale: "en" },
      { params: [...], locale: "en" },
    ],
    [
      { params: [...], locale: "de" },
      { params: [...], locale: "de" },
      { params: [...], locale: "de" },
    ],
    [
      { params: [...], locale: "tr" },
      { params: [...], locale: "tr" },
      { params: [...], locale: "tr" },
    ],
  ],
  fallback: ...
}

see https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#paths

SomaliOP

2023-08-29T01:54:51.000Z

sorry i cant understand.
i understand what i shold do, but i dont know how

SomaliOP

2023-08-29T02:00:02.000Z

okay i got this

@Somali okay i got this

joulev

2023-08-29T02:00:41.000Z

yeah then it has to be ["home"] not "home"

SomaliOP

2023-08-29T02:02:58.000Z

with this, but still get same error

@joulev yeah then it has to be `["home"]` not `"home"`

SomaliOP

2023-08-29T02:09:17.000Z

idk this ok?
i just

@Somali idk this ok? i just

joulev

2023-08-29T02:12:14.000Z

i don't know your getAllPageIds or whatever so i don't know about that Promise.all, but this works so base your code on this

// pages/[[...slug]].tsx
import { GetStaticPathsResult } from "next";

type Params = {
  slug: string[];
};

export default function Page() {
  return <div>Hello world</div>;
}

export function getStaticPaths(): GetStaticPathsResult<Params> {
  return {
    fallback: false,
    paths: [
      { params: { slug: [] }, locale: "en" },
      { params: { slug: [] }, locale: "de" },
      { params: { slug: ["about"] }, locale: "en" },
      { params: { slug: ["about"] }, locale: "de" },
      { params: { slug: ["about", "us"] }, locale: "en" },
      { params: { slug: ["about", "us"] }, locale: "de" },
    ],
  };
}

export function getStaticProps() {
  return { props: {} };
}

Route (pages)                              Size     First Load JS
â”Œ â— /[[...slug]] (325 ms)                  285 B          76.6 kB
â”œ   â”œ /en
â”œ   â”œ /de
â”œ   â”œ /en/about
â”œ   â”” [+3 more paths]

@joulev i don't know your `getAllPageIds` or whatever so i don't know about that `Promise.all`, but this works so base your code on this ts // pages/[[...slug]].tsx import { GetStaticPathsResult } from "next"; type Params = { slug: string[]; }; export default function Page() { return <div>Hello world</div>; } export function getStaticPaths(): GetStaticPathsResult<Params> { return { fallback: false, paths: [ { params: { slug: [] }, locale: "en" }, { params: { slug: [] }, locale: "de" }, { params: { slug: ["about"] }, locale: "en" }, { params: { slug: ["about"] }, locale: "de" }, { params: { slug: ["about", "us"] }, locale: "en" }, { params: { slug: ["about", "us"] }, locale: "de" }, ], }; } export function getStaticProps() { return { props: {} }; } Route (pages) Size First Load JS â”Œ â— /[[...slug]] (325 ms) 285 B 76.6 kB â”œ â”œ /en â”œ â”œ /de â”œ â”œ /en/about â”œ â”” [+3 more paths]

SomaliOP

2023-08-29T02:46:01.000Z

idk i try a lot of variations and still get 404 or some error.

But I've noticed that when a hot reload happens, I don't get a 404, I get a page, and page transitions don't work with page reload.

do you have some example with locales loop?

this my api ref for all pages if you can check this please

https://next.virtuaethic.com/api/de/resources

joulev

2023-08-29T03:30:29.000Z

sorry i don't know what's wrong here

Answer