I18N i found a way to translate slugs! (Probabbly)

Question

Hey all i have a question about translation slugs in next13 with app directory, i think i have found a great way to translate slugs for my static blog pages, in my opinion everything work clear but for final user. There is some cases that i cannot understand during building, and might be during development process.

To reach slug translations i created app dir structure as in attachment (with folders), main assumtions of this idea is to work with parallal routes as with react-router
That is a code that make work for me!

import { notFound } from 'next/navigation';

export const dynamicParams = false;
export const dynamic = 'force-static';
export const fetchCache = 'force-cache';
export const revalidate = 'force-cache';

interface Layout extends LayoutProps {
  params: LayoutProps['params'] & {
    page1: 'homepage' | 'strona-glowna' | 'projects' | 'projekty' | 'services' | 'uslugi';
  };
  homepage: React.ReactNode;
  services: React.ReactNode;
  projects: React.ReactNode;
}

export default function Layout({ params, homepage, projects, services }: Layout) {
  if (
    (params.page1 === 'homepage' && params.locale === 'en') ||
    (params.page1 === 'strona-glowna' && params.locale === 'pl')
  ) {
    return <>{homepage}</>;
  } else if (
    (params.page1 === 'projects' && params.locale === 'en') ||
    (params.page1 === 'projekty' && params.locale === 'pl')
  ) {
    return <>{projects}</>;
  } else if (
    (params.page1 === 'services' && params.locale === 'en') ||
    (params.page1 === 'uslugi' && params.locale === 'pl')
  ) {
    return <>{services}</>;
  }

  notFound();
}

But i see some issues with this approach, first of all i am getting so weird building logs (attachment nb 2), in my opinion it does not influece on final user experience because it will be served as static page.

Am i able to avoid this rebuilding application with this kind of approach?

Sun bear · Answer

I wasn't able to give more chars so i will continue here.My page.tsx which is located in [page] looks as export const dynamicParams = false;
export const dynamic = 'force-static';
export const fetchCache = 'force-cache';
export const revalidate = 'force-cache';

export function generateStaticParams() {
  return [
    { page1: 'projects', locale: 'en' },
    { page1: 'homepage', locale: 'en' },
    { page1: 'services', locale: 'en' },

{ page1: 'strona-glowna', locale: 'pl' },
    { page1: 'projekty', locale: 'pl' },
    { page1: 'uslugi', locale: 'pl' }
  ];
}

export default function TestPage() {
  return null;
}And if there is a way to block building every other pages that are not mentioned right here i would use it because in most of case i know which slugs i want to render and create.Also for dynamic pages i would forbidden to creating page via normal user coming on page, i think the possibility to create page only via webhook with page revalidate would be so great idea, but i could not find any solution to forbid user creating user page that is available to create via just visiting this site. I would like to make page that should be able to create only via API

I18N i found a way to translate slugs! (Probabbly)

2 Replies