Components

NextGlobeGen provides Link and Form components that wrap the Next.js components with the same names. These can be used to navigate to localized pathnames.

<Link>

<Link> is a React component that extends the Next.js <Link> component to provide locale-aware navigation to localized pathnames. It is the primary way to navigate between localized routes.

import { Link } from "next-globe-gen";

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>;
}

Props

The following props can be passed to the <Link> component:

Prop	Type	Required
href	Route | HrefOptions<Route>	Yes
locale	Locale	-
params	RouteParams<Route>	*

* params prop is required only if the given route has dynamic segments.

Good to know

In addition to the listed props, all of the Next.js Link component props can be passed as props to the component.

href (required)

The route, pathname or URL to navigate to. If the given href matches to a route that has localizations, it will be localized. Otherwise the href will be passed as it is to the Next.js Link component.

Using href prop

// When the user is on `en` locale, the link will point to `/en/dashboard`
<Link href="/dashboard">
  Dashboard
</Link>

// Search params can be added via a `query`
<Link href={{ pathname: "/dashboard", query: { sortBy: "name" } }}>
  Dashboard
</Link>

locale

To switch to another language, pass a locale as a prop. It will also set the hreflang attribute to the anchor tag.

Using locale prop

// Will point to `/fi/hallintapaneeli`
<Link href="/dashboard" locale="fi">
  Hallintapaneeli
</Link>

// If the href is given as an object, the locale should be passed in the object
<Link href={{ pathname: "/dashboard", locale: "fi" }}>
  Hallintapaneeli
</Link>

params

If the given href is a route that includes dynamic segments, the params for the route can be passed by a params prop.

Using params prop

// When the user is on `en` locale, the link will point to `/en/images/43-image-slug`
<Link href="/images/[id]" params={{ id: "43-image-slug" }}>
  Image Slug
</Link>

// If the href is given as an object, the params should be passed in the object
<Link href={{ pathname: "/images/[id]", params: { id: "43-image-slug" } }}>
  Image Slug
</Link>

<Form>

<Form> is a React component that extends the Next.js <Form> component so that the Next.js Form component enhancements work also with localized pathnames.

import { Form } from "next-globe-gen";

export default function Page() {
  return (
    {/* On submit, the URL will change to /en/search?query=abc */}
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

Props

The following props can be passed to the <Form> component:

Prop	Type	Required
action	Route	Yes
locale	Locale	-
params	RouteParams<Route>	*

* params prop is required only if the given route has dynamic segments.

Good to know

In addition to the listed props, all of the Next.js Form component props can be passed as props to the component.

action (required)

The route, pathname or URL to navigate to. If the given action matches to a route that has localizations, it will be localized. Otherwise the action will be passed as it is to the Next.js Form component.

Using action prop

// When the user is on `en` locale, the form will navigate to `/en/search?query=abc`
<Form action="/search">{/* Inputs */}</Form>

locale

To switch to another language, pass a locale as a prop.

Using locale prop

// Form will navigate to `/fi/haku?query=abc`
<Form action="/search" locale="fi">
  {/* Inputs */}
</Form>

params

If the given action is a route that includes dynamic segments, the params for the route can be passed by a params prop.

Using params prop

// When the user is on `en` locale, the form will navigate to `/en/blog/Jon1VK?query=abc`
<Form action="/blog/[user]" params={{ user: "Jon1VK" }}>
  {/* Inputs */}
</Form>