Routing

With NextGlobeGen, the application routes are created to a special src/_app directory. In this directory all Next.js file-system based routing rules apply and all Next.js specific routing files work exactly the same as in src/app directory. Localized routes are generated to src/app/(i18n) directory based on the contents in the src/_app origin directory.

The localized route directory src/app/(i18n) should not be modified. Other non-localized routes, such as api routes, can still be added to the root of the src/app directory.

In addition to Next.js specific routing files, NextGlobeGen adds a few routing file conventions of its own. NextGlobeGen also passes the current locale to all functions that cannot infer it from the rendering context.

Configuring directory locations

Default directory locations can be altered through configuration.

Localized pathnames

The pathnames in the url often need to be translated to improve SEO. In NextGlobeGen this is done for each route segment (directory) separately with special i18n.ts files. With this approach the route segment and it's localizations can be colocated.

Static translations

The simplest way to translate a route segment is to export as a default export an object which includes localized versions of the route segment for each locale.

src/_app/dashboard/i18n.ts

const segmentTranslations = {
  en: "dashboard", // If omitted, the directory name is used
  fi: "hallintapaneeli",
};

export default segmentTranslations;

With an async function

Another way to translate a route segment is to export as a default export an async function that returns the route segment localizations as an object.

src/_app/dashboard/i18n.ts

export default async function generateSegmentTranslations() {
  /* Fetch translations for example from an external source  */
  return {
    en: "dashboard", // If omitted, the directory name is used
    fi: "hallintapaneeli",
  };
}

info

• Each parallel route segment needs to be localized separately.
• Intercepted route segments have to include the segment matcher in the translations. For example a Finnish translation of (..)photo would be (..)kuva.

Markdown pages

NextGlobeGen has a support for MDX pages by using a locale specific file convention. To use markdown pages, first follow Next.js MDX docs on how to configure Next.js so it can process MDX.

Then create a page.<locale>.mdx file for each configured locale in the route segment directory from where the markdown page should be served. NextGlobeGen will use the correct markdown page for each locale based on the <locale> part of the filename.

English MDX Page

./src/_app/markdown/page.en.mdx

export const metadata = { title: "Markdown page" };

# Markdown page

This content is shown on `/en/markdown` path.

Finnish MDX Page

./src/_app/markdown/page.fi.mdx

export const metadata = { title: "Markdown sivu" };

# Markdown sivu

Tämä sisältö näytetään `/fi/markdown` polussa.

Localized 404 page

To catch unmatched /<locale>/**/* URLs, two files are required:

1. src/_app/[...catchAll]/page.tsx
2. src/_app/not-found.tsx

The [...catchAll]/page.tsx is rendered for all unmatched URLs and not-found.tsx catches all notFound() calls.

Now by calling notFound() in [...catchAll]/page.tsx the UI defined in the not-found.tsx file will be rendered.

Catch-all page

./src/_app/[...catchAll]/page.tsx

import { notFound } from "next/navigation";

export default function CatchAllPage() {
  notFound();
}

Localized 404 page

./src/_app/not-found.tsx

export default function NotFound() {
  /* Return localized UI using next-globe-gen APIs */
}

locale param

Hooks such as useLocale cannot be used in functions that are executed outside of rendering contexts. Such functions are for example all metadata routing files and generateStaticParams and generateSitemap functions.

For these functions the locale is included in the first argument object.

src/_app/sitemap.ts

import type { Locale } from "next-globe-gen";

export async function generateSitemaps({ locale }: { locale: Locale }) {
  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }];
}

type SitemapParams = { id: number; locale: Locale };

export default function sitemap({ id, locale }: SitemapParams) {
  /* Sitemap generation logic */
}

Routing Components

In rendering contexts the primary way to access the current locale is with useLocale hook, but the locale is also passed as a prop to routing components.