Dealing with slugs inside slugs

Unanswered

Sun bear posted this in #help-forum

Sun bearOP

2023-06-16T12:17:38.000Z

So im building a game site that detail page is needs to something that have a detail in detail page like this(atached a image of the structure) and im getting a error on build im a doing something wrong btw version is "next": "^13.1.6", and its not app router

22 Replies

Sun bearOP

2023-06-16T12:18:11.000Z

if i remove that skin part i can get a build

@Sun bear So im building a game site that detail page is needs to something that have a detail in detail page like this(atached a image of the structure) and im getting a error on build im a doing something wrong btw version is "next": "^13.1.6", and its not app router

joulev

2023-06-16T12:58:22.000Z

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [
      {
        params: {
          weaponId: "hello",
          skinId: "world"
        },
      },
    ],
    fallback: true,
  }
}

will get you .../weapons/hello/skins/world

Sun bearOP

2023-06-16T13:00:18.000Z

i dont get it why? and do i gonna put this into the [weaponId]/index.ts ?

@joulev

@Sun bear i dont get it why? and do i gonna put this into the [weaponId]/index.ts ?

joulev

2023-06-16T13:01:24.000Z

inside [weaponId]/index.ts then just remove the skinId from the paths array

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [
      {
        params: {
          weaponId: "hello"
        },
      },
    ],
    fallback: true,
  }
}

will get you .../weapons/hello/skins

Sun bearOP

2023-06-16T13:04:01.000Z

im asking this to be sure so im gonna handle all static site building logic in the main index.ts files of those ?

example

not handle inside championId

just index?

@Sun bear im asking this to be sure so im gonna handle all static site building logic in the main index.ts files of those ?

joulev

2023-06-16T13:06:30.000Z

do you need getStaticPaths? https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths#when-should-i-use-getstaticpaths

if you do need getStaticPaths for a route, you need to define it in that route. If you need getStaticPaths in index.tsx and [skinId].tsx you need to have separate getStaticPaths in each file

Sun bearOP

2023-06-16T13:07:21.000Z

oh yes i already have it i thought for a moment you were saying something different

for example champions detail pages returns 404 somehow

export const getStaticPaths: GetStaticPaths = async ({locales}) => {
    const paths = [];

    for (const locale of locales as string[]) {
        for (const key in champions) {
            paths.push({params: {championId: key}, locale});
        }
    }
    return {paths, fallback: true};
};

export const getStaticProps: GetStaticProps = async (context) => {
    const {locale} = context;
    const champion = context.params?.championId;

    if (!locale || !champion) {
        return {
            notFound: true,
            revalidate: 60 * 60, // 1 hour
        };
    }

    try {
        const {data} = await ssrClient.query({
            query: ChampionDetail,
            variables: {championId: champion as string, language: locale},
        });
        if (!data.games.LoL.Champion) {
            return {
                notFound: true
            };
        }

        return {
            props: {championObject: data.games.LoL.Champion},
            revalidate: 604800, //1 week is equal to 604800 seconds.
        };
    } catch {
        return {
            notFound: true,
            revalidate: 60 * 60, // 1 hour
        };
    }
};