Not able to navigate to subpages

[abhishek-newu-appcom]

Hello everyone,

I made website in next.js using firebase as backend.
I am using next 14.2.0.
I am fetching the case studies as soon as user lands to case study page.
When user click on any case study then it’s navigating to it’s detail screen.

This navigation works only for 1 day after that I am not able to navigate. When user click on any case study then it’s redirect the case study main page.

My website’s case study home page

Case studies | NewU

when you click on first case-study then it’s redirect to same page.

[pawlean (Pauline P. Narvas)]

Hi, @abhishek-newu-appcom!

Welcome to the Vercel Community! Feel free to drop into Introductions to introduce yourself.

This navigation works only for 1 day after that I am not able to navigate. When user click on any case study then it’s redirect the case study main page.

From what I understand, you made no changes to your code (?) and now, the navigation to the case studies is broken. Is that right?

I went onto your website and can confirm that the only case study that works is this one: Case study Telindus | NewU

It’s worth checking how you manage your routes on your app. Feel free to share any snippets here as it’d help us figure out what wrong.

[abhishek-newu-appcom]

I am handing the route of case study page using these two methods

1. getStaticPaths

export const getStaticPaths: GetStaticPaths = async () => {
  let pathsService: CaseStudyPathsService = new CaseStudyPathsServiceImpl();
  console.log("Case study page getStaticPaths runs");
  console.log("Paths: ", (await pathsService.getPaths()).paths);
  return await pathsService.getPaths();
};

2. getStaticProps

export const getStaticProps: GetStaticProps = async (context: GetStaticPropsContext) => {
  console.log("Case study page getStaticProps runs");

  let propsService: ICaseStudyPropsService = new CaseStudyPropsService();
  let urlService: IUrlService = UrlService.get();
  const caseStudyProps: any = await propsService.getProps(context);
  const languagePropService: LanguagePropService = new LanguagePropService();
  const langProps: any = languagePropService.getProps(context);

  if (caseStudyProps.props.shouldRedirect) {
    console.log("Redirecting from Case study page");

    const availableLanguages: string[] = urlService.getAvailableLanguages();
    const languageExists: boolean = availableLanguages.includes(langProps.language);
    const redirectUrl: string = urlService.getCaseStudyUrlFromLanguage(
      languageExists ? langProps.langauge : "en"
    );

    return {
      redirect: {
        destination: redirectUrl,
        permanent: false,
      },
    };
  }

  const caseStudy: CaseStudy = JSON.parse(caseStudyProps.props.caseStudyJson);
  const canonicalUrl: string = urlService.getDynamicCanonical({
    language: langProps.props.language,
    contentUrl: caseStudy.url,
    staticUrl: urlService.CASE_STUDIES_STATIC,
  });
  const defaultAlternateUrl: string = urlService.getDynamicDefaultAlternate({
    availableUrls: caseStudyProps.props.availableUrls,
    staticUrl: urlService.CASE_STUDIES_STATIC,
  });
  const alternateUrls: DynamicUrl[] = urlService.getDynamicAlternatives({
    availableUrls: caseStudyProps.props.availableUrls,
    staticUrl: urlService.CASE_STUDIES_STATIC,
  });

  return {
    props: {
      ...langProps.props,
      ...caseStudyProps.props,
      canonicalUrl,
      defaultAlternateUrl,
      alternateUrls: alternateUrls.map((url) => url.toObject()),
    },
    revalidate: 300,
  };
};

when user click on any case-study then I am calling this function

  router
    .push(
       UrlService.get().createDynamicCaseStudyUrl({
          language,
          contentSlug: caseStudy.url,
       })
    );

Definition of createDynamicCaseStudyUrl method

public createDynamicCaseStudyUrl({ language, contentSlug }: { language: string; contentSlug: string }): string {
    return "/" + language.toLocaleLowerCase() + "/" + this.CASE_STUDIES_STATIC.slug + "/" + contentSlug;
  }