it would be archiveable. However: it's pretty hard to build all your translations and you will get more work the more cities your have. The idea itself is good and I still guess there is to much redundancy

I see. We’re mostly looking to use it for very small SEO tweaks as well as the routing, as we’re transferring from a WordPress multisite solution to a NextJS solution and we don’t want to mess all the links up.

The most that would change between translations is the name of the city being used in the content, although we’re planning on using a WordPress backend and potentially utilising the same multisite system to handle the differing content if it’s needed.

sorry, should've replied to you on this one 😂

then you can add a dynamic segment as your city part and redirect/rewrite them to the correct language location. Then you have the SEO and have still easy maintenance

So the next config is as simple as:

module.exports = {
    i18n: {
        locales: ['london', 'manchester'],
        defaultLocale: 'london',
    }
}

And then how do we swap out the content from there? Is there a callback function I can use to bring the local to other pages and use that in my checks for content?

Nevermind, read the documentation. Give me a hot minute to read through this and see if I can work it out myself. I'll post my findings on here for posterities sake.

Hypothetically, you would achieve this by using the locales set up and using the following logic to get data:

import { useRouter } from 'next/router';
import { useState } from 'react';

export async function GetData(query, variables) {

    const router = useRouter();
    const locale = router.locale;
    const defaultLocale = router.defaultLocale;
    const [dataUrl, setDataUrl] = useState(process.env.NEXT_PUBLIC_GRAPHQL_URL);

    const url = process.env.NEXT_PUBLIC_GRAPHQL_URL;
    if(locale !== defaultLocale) {
        setDataUrl(url.replace("/graphql", "/" + locale + "/graphql"));
    } else {
        setDataUrl(url);
    }

    const { data } = await fetch(dataUrl, {
    
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, variables }),
        next: { revalidate: 300 },
    
    }).then((res) => res.json());

    return data;

}

Although, this solution hasn't exactly worked for me because this function has also been used in my build functions, so I'll need to find a way around that since I can't useRouter within this environment.

yea... that looks wrong.. normally you can get the city (in your case) and then check your json file where all translations are in. There you can give it a grouping. Check in which grouping the specific city is and then read the texts (translations). Like that you can easily get the translations. When you need translations from the backend (like data for product tiles, descriptions, ...) you can get the current locale from the client that makes the request and do the same: look up the translations in your database and replace the default ones

Well that's more for replacing individual words, rather than being able to handle content dynamically. We do mainly use it for replacing the singular location word, but we'd like to have the option to change up content per localized site. In case for example, we want to target a different kind of audience in one location or we want to showcase projects more relevant to the area. Like if there are projects we've done in London lets say, we can pick those out to show to the user as a preview to case studies. But in Manchester, we'd show projects from around that area that we select from our case studies.

I know the code doesn't work, because we're using it on build and at that point in the lifecycle we're unable to get the locale, hence making it impossible to do.

I did try to alter the solution like so

export async function GetData(query, variables, locale) {
    const url = process.env.NEXT_PUBLIC_WORDPRESS_GRAPHQL_URL;
    var dataUrl = '';
    if(locale && locale !== 'london') { // replace 'london' with default locale'
        dataUrl = url.replace("/graphql", "/" + locale + "/graphql");
    } else {
        dataUrl = url;
    }

    const { data } = await fetch(dataUrl, {
    
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, variables }),
        next: { revalidate: parseInt(process.env.REVALIDATE_TIME) },
    
    }).then((res) => res.json());

    return data;

}

However, I also can't use useRouter in the getStaticProps function either, so that's also a bust.

Although it could also be an issue with our project set up, as we're not using the /api route at all, which we probably should be doing instead of the current setup which a /lib/getData.js function to handle anything content wise.

Even so, the big issue at the minute is pulling through the locale information to our queries so that we can query for content based on the locale, and also when building the project using said locale to determine the content of those static pages.

Nevermind, figured this one out. You can just pass locale to the getStaticProps function.

export async function getStaticProps({locale}) {
  const pageData = await GetData(GET_PAGE, { slug: "home" }, locale);
  // ...
  return {
        props: {
            pageData,
            // ...
        }
    }
}

This then makes the previous script work as intended.

Don't know if this is the most effective solution or the most proper solution, but it's a solution?

yes, you can do it. I am not experienced with pages router nor i18n itself. I just using the default internationalisation. Because of that, I will unfollow this thread for now