Next + strapi dynamic homepage don't show up

Question

I have problem with displaying hompage on my site. When I enter page with slug e.g. /blog everything works fine, but problem occurs when I want to go to homepage, then website displays:

This page isn’t working localhost redirected you too many times. Try clearing your cookies. ERR_TOO_MANY_REDIRECTS I will be grateful for your help

[[slug]].js `

import delve from "dlv";
import ErrorPage from "next/error";
import Layout from "../components/layout";
import BlockManager from "../components/shared/BlockManager";
import { getData, handleRedirection } from "../utils";
import { getLocalizedParams } from "../utils/localize";

const Universals = ({ global, pageData, preview }) => {
  if (pageData === null) {
    return <ErrorPage statusCode={404} />;
  }

  const blocks = delve(pageData, "attributes.blocks");
  return (
    <Layout global={global} pageData={pageData} type="pages" preview={preview}>
      {blocks && <BlockManager blocks={blocks} />}
    </Layout>
  );
};

// This gets called on every request
export async function getServerSideProps(context) {
  const { slug, locale } = getLocalizedParams(context.query);

  try {
    const data = getData(
      slug,
      locale,
      "page",
      "collectionType",
      context.preview
    );
    const res = await fetch(delve(data, "data"));
    const json = await res.json();

    if (!json.data.length) {
      return handleRedirection(context.preview, null);
    }

    return {
      props: { pageData: json.data[0], preview: context.preview || null },
    };
  } catch (error) {
    return {
      props: { pageData: null },
    };
  }
}

export default Universals;

`

localize.js

`

import delve from 'dlv';
import { getStrapiURL } from '.';

export function getLocalizedParams(query) {
  const lang = delve(query, 'lang');
  const slug = delve(query, 'slug');

  return { slug: slug || '', locale: lang || 'en' };
}

export function localizePath(localePage, type) {
  const { locale, slug } = localePage;

  switch (type) {
    case 'restaurant':
      return `/restaurants/${slug}?lang=${locale}`;
    case 'article':
      return `/blog/${slug}?lang=${locale}`;

    default:
      return `/${slug}?lang=${locale}`;
  }
}

function getUrl(type, localization, targetLocale) {
  switch (type) {
    case 'pages':
      return `/pages/${delve(localization, 'id')}`;
    case 'restaurant-page':
      return `/restaurant-page?locale=${targetLocale}`;
    case 'blog-page':
      return `/blog-page?locale=${targetLocale}`;
    case 'article':
      return `/articles/${delve(localization, 'id')}?locale=${targetLocale}`;
    case 'restaurant':
      return `/restaurants/${delve(localization, 'id')}?locale=${targetLocale}`;
    default:
      break;
  }
}

export async function getLocalizedData(targetLocale, pageData, type) {
  const localization = pageData.attributes.localizations.data.find(
    (localization) => localization.attributes.locale === 'fr-FR'
  );
  const url = getUrl(type, localization, targetLocale);
  const res = await fetch(getStrapiURL(url));
  const localePage = await res.json();
  return localePage;
}

export async function listLocalizedPaths(pageData, type) {
  const currentPage = {
    locale: pageData.attributes.locale,
    href: localizePath(pageData.attributes, type),
  };
  const paths = await Promise.all(
    pageData.attributes.localizations.data.map(async (localization) => {
      const url = getUrl(type, localization, localization.attributes.locale);
      const res = await fetch(getStrapiURL(url));
      const localePage = await res.json();
      const page = { ...pageData.attributes, ...localePage.data.attributes };
      return {
        locale: page.locale,
        href: localizePath(page, type),
      };
    })
  );

  const localizedPaths = [currentPage, ...paths];
  return localizedPaths;
}

`

Next + strapi dynamic homepage don't show up

0 Answers0