Skip to main content

Directory Structure

Dynamic locale-based routing​

Next.js 12 uses page-based routing, meaning the structure of your /src/pages/ directory will directly determine the routes of your project. In corgi, all pages must live one step deeper: within the /src/pages/[locale]/ directory.

The [locale] directory acts as a dynamic route, which—when compiled—results in the appropriate locale string being slotted into the URL.

Here is an example file tree for the pages directory in a corgi project. We'll cover some of the other files shortly; let's only concern ourselves with the [locale] directory for now:

.
└── src/
    └── pages/
        ├── [locale]/
        │   ├── index.jsx
        │   ├── about/
        │   │   └── index.jsx
        │   └── contact/
        │       └── index.jsx
        ├── _app.jsx
        ├── _document.jsx
        ├── 404.jsx
        ├── 500.jsx
        └── index.jsx

The directory structure above will result in the following routes, assuming locales are defined for "en", "es", and "fr":

/
/es
/fr

/en/about
/es/about
/fr/about

/en/contact
/es/contact
/fr/contact
Default locale homepage URL

Note that the root (homepage) of the default locale's URL does not contain the locale string. This is an opinion enforced by corgi, in an effort to have simpler URLs for the primary locale's landing page experience.

In other words, corgi makes it so that you don't have to share your website as myproject.com/en if your default locale is "en". Rather, you can just share myproject.com

Other files in the pages directory​

/src/pages/index.jsx​

This is the root/homepage component, for the default locale only. It ensures that you can navigate to / on your project, and see the default locale's content.

Homepage content

All homepage content must be edited in the /src/layouts/home/home-layout.jsx component, becuase this particular index page is not the only place the homepage content needs to live. A homepage index file must also live in the dynamic [locale] path (for localized pages, of course!) — thus the abstracted component for the homepage. More on this in the page components section.

_app_.jsx, _document.jsx​

These are no different than the typical custom Next.js 12 setup, and handle things like global context providers, the HTML <head> element, <body> tag, and so on. More info in the Next docs, for _app.jsx and _document.jsx.

404.jsx, 500.jsx​

These are resource-not-found and server-error files, which are required for Next.js builds. Since corgi generates a static site, these files are not actually used in a deployment build, but since Next.js requires them, we must keep them here.