Gatsby: Custom page name (multilingual)

[gurpreet-hanjra]

Hello, I'm not really sure how to call this feature/functionality. But I will try to explain as much I can -
I have a multilingual static website in 2 languages - en and de. I'm not using any gatsby i18n plugin. Just custom implementation to load strings dynamically from JSON file as per language selected. So, a single page like pages/contact.js loads in both cases with different languages.
So now, I want to display localhost:8000/contact in case of English and localhost:8000/kontakt in case of German. Is it possible? Any help is much appreciated.

[jgierer12]

You could set up a redirect, or create two pages for the two languages (pages/contact.js and pages/kontakt.js) which share the same components.

[gurpreet-hanjra]

Thank you @jgierer12 I would try server redirect. And creating 2 pages for different languages is something I wanted to avoid. Because there would be good number of pages and would be exactly same.

[sidharthachatterjee]

@gurpreet-hanjra You're probably better off creating pages for each language in gatsby-node _and_ using redirects to ensure the user is on the right page.

Without multiple pages being server side rendered, you'll have have a flash of the default language Strings if i18n is client side

[arturhenryy]

@gurpreet-hanjra i just implemented this solution @sidharthachatterjee recommended a few days ago. sharing my code here if you need a hint. i am using wordpress as source but this approach works with every other source.

this is the part of my gatsby-node.js which creates the pages for the languages programmatically.

        _.each(result.data.allWordpressPage.edges, edge => {
          createPage({
            path: edge.node.lang === "de" ? `/${edge.node.slug}/` : `${edge.node.lang}/${edge.node.slug}/`,
            component: (() => {
              if (edge.node.wordpress_id === 20 || edge.node.wordpress_id === 900) {
                return slash(path.resolve(`./src/templates/about.jsx`));
              }
              if (edge.node.wordpress_id === 283 || edge.node.wordpress_id === 923) {
                return slash(path.resolve(`./src/templates/contact.jsx`));
              }
              if (edge.node.wordpress_id === 161 || edge.node.wordpress_id === 908 || edge.node.wordpress_id === 159 || edge.node.wordpress_id === 906) {
                return slash(path.resolve(`./src/templates/project_category.jsx`));
              }
              if (edge.node.wordpress_id === 123 || edge.node.wordpress_id === 910) {
                return slash(path.resolve(`./src/templates/journal.jsx`));
              }
              if (edge.node.wordpress_id === 86 || edge.node.wordpress_id === 911) {
                return slash(path.resolve(`./src/templates/projects.jsx`));
              }
              if (edge.node.wordpress_id === 72 || edge.node.wordpress_id === 901 || edge.node.wordpress_id === 67 || edge.node.wordpress_id === 902) {
                return slash(path.resolve(`./src/templates/basic_page.jsx`));
              }
              if (edge.node.wordpress_id === 23 || edge.node.wordpress_id === 905) {
                return slash(path.resolve(`./src/templates/jobs.jsx`));
              }
              if (edge.node.wordpress_id === 9 || edge.node.wordpress_id === 903) {
                return slash(path.resolve(`./src/templates/index.jsx`));
              }
              return slash(path.resolve(`./src/templates/wp_page.jsx`));

            })(),
            context: {
              id: edge.node.id,
              lang: edge.node.lang
            }
          });
        });

you would need to move your files inside the pages directory to the templates directory

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[wardpeet]

We have a few guides on this matter:

• https://www.gatsbyjs.org/docs/localization-i18n/
• https://www.gatsbyjs.org/blog/2017-10-17-building-i18n-with-gatsby
• https://www.gatsbyjs.org/docs/creating-prefixed-404-pages-for-different-languages/

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜