New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve initial render of Link
for localePrefix: 'as-necessary'
and make getPathname
more useful
#444
Comments
@jlalmes Can you provide a screenshot from the Google Search Console issue that shows the issue? Maybe I was a bit too naive to think that this isn't an issue for Google, since we a) always have a working URL with the redirect and b) patch it up as necessary on the client side. |
Hmm, I see—thanks! Is maybe |
Small update: The factory functions for navigation APIs that are being worked on in #426 could help to mitigate this for That means that if the default locale can only be determined in the middleware, we can't statically render different link targets on the server side. If the navigation APIs would also accept domain config, we could check if the user doesn't use domain config to mitigate this, but this gets quite complex and still doesn't fix all cases (i.e. when the user uses a domain config). Also, we have to accept domain config only to detect if the user doesn't use one—seems a bit backward. I'm wondering if it would be a good idea to flip the default for Update: With the release candidate, the default for |
defaultLocale
and localePrefix
for initial render of Link
when localePrefix: 'as-necessary'
defaultLocale
and localePrefix
for initial render of Link
when localePrefix: 'as-necessary'
or localePrefix: 'never'
defaultLocale
and localePrefix
for initial render of Link
when localePrefix: 'as-necessary'
or localePrefix: 'never'
defaultLocale
and localePrefix
for initial render of Link
when localePrefix
is as-necessary
or never
@amannn Could this be fixed more easily for when the |
That's a good point actually. Based on your use case, in 18157bc I've added a note that With that, we could consider:
Would you be interested in working on this? |
@amannn sounds like a plan! For now I have added a wrapper component that seems to do the trick: "use client";
import {
type I18nLink,
type LocaleCode,
getPathname,
type pathnames,
} from "@/lib/navigation";
import { useLocale } from "next-intl";
import NextLink from "next/link";
import { type ComponentProps } from "react";
export function Link<Pathname extends keyof typeof pathnames>({
href,
...rest
}: ComponentProps<typeof I18nLink<Pathname>>) {
const locale = useLocale() as LocaleCode;
// @ts-expect-error
const localizedHref = getPathname({ href, locale });
return <NextLink href={localizedHref} {...rest} />;
} |
Sounds good! I've started working on an implementation. |
…render of `Link` when using `localePrefix: never`. Also fix edge case in middleware when using localized pathnames for redirects that remove a locale prefix (fixes an infinite loop). (#678) By accepting an optional `localePrefix` for the navigation APIs, we can get the initial render of the `href` of `Link` right if `localePrefix: 'never'` is set. This can be helpful if domain-based routing is used and you have a single locale per domain. Note that this change is backward-compatible. It's now recommended to set the `localePrefix` for the navigation APIs to get improved behavior for `Link` in case `localePrefix: 'never'` is used, but otherwise your app will keep working with the previous behavior. Ref #444
@zipme I've addressed your use case in #678, this should help! In regard to this issue: As a second step, if the navigation APIs would accept This would require a major version though to require |
defaultLocale
and localePrefix
for initial render of Link
when localePrefix
is as-necessary
or never
defaultLocale
and localePrefix
for initial render of Link
when localePrefix
is as-necessary
defaultLocale
and localePrefix
for initial render of Link
when localePrefix
is as-necessary
localePrefix
, defaultLocale
and domains
for navigation APIs
localePrefix
, defaultLocale
and domains
for navigation APIslocalePrefix
, defaultLocale
and domains
for navigation APIs to improve handling of localePrefix: 'as-necessary'
localePrefix
, defaultLocale
and domains
for navigation APIs to improve handling of localePrefix: 'as-necessary'
localePrefix
, defaultLocale
and domains
for navigation APIs
I was fiddling around with the navigation APIs these days, and realised that it seems impossible (at least for me) to make the |
Replied here: #653 (comment) |
localePrefix
, defaultLocale
and domains
for navigation APIsLink
for localePrefix: 'as-necessary'
and make getPathname
more useful
When using
And calling I think it's possible and not too difficult if we also pass in the export const {
redirect,
Link
} = createLocalizedPathnamesNavigation({ locales, pathnames, localePrefix, defaultLocale }); To let it redirect correctly right? But indeed, for domains configuration this would still be quite complicated I suppose |
I am doing this now as a workaround: import { type RedirectType, redirect as nextRedirect } from "next/navigation";
import { locales, pathnames, localePrefix, defaultLocale } from './config'
import NextLink from "next/link";
export const {
redirect,
getPathname: getPathname_
} = createLocalizedPathnamesNavigation({ locales, pathnames, localePrefix });
export const getPathname: typeof getPathname_ = ({ href, locale }) => {
const pathname = getPathname_({ href, locale });
let prefix = "";
if (locale !== defaultLocale) {
prefix = `/${locale}`;
}
return `${prefix}${pathname}`;
};
export const redirect: typeof redirect_ = (href, type) => {
const locale = useLocale();
const path = getPathname({ href, locale });
nextRedirect(path, type);
};
export function Link<Pathname extends keyof typeof pathnames>(
{ href, ...rest }: ComponentProps<typeof I18nLink<Pathname>>,
ref: ForwardedRef<ElementRef<typeof NextLink>>,
) {
const locale = useLocale();
// @ts-expect-error this is okay
const localizedHref = getPathname({ href, locale });
return <NextLink href={localizedHref} {...rest} ref={ref} />;
} |
Thanks for workarounds. Hope, that fix will be rolled out soon. As there is no point to initially render locale in tag, as it is causing SEO issues. |
Is your feature request related to a problem? Please describe.
The
localePrefix: 'as-necessary'
strategy currently has these drawbacks:Link
in RSC always includes a prefix, which we potentially remove during hydration if we detect that no locale prefix should be used.getPathname
is somewhat hard to use, because users have to specify their own logic to check if a prefix should be added.Describe the solution you'd like
localePrefix
,defaultLocale
anddomains
, all being expected to be provided in case you use them. We should move all routing config to a sharedRoutingConfig
type that can be shared with the middleware.Link
should consider the new options for the initial render (see Improve initial render ofLink
forlocalePrefix: 'as-necessary'
and makegetPathname
more useful #444 (comment)). IfLink
receiveslocales
, we should be able to useusePathname
to see if the current pathname is prefixed and use this information to get the initial SSR render right.getPathname
should consider the options too and return a final pathname (with/without a locale prefix, with/without domain). Furthermore,getPathname
should be supported for shared pathnames too.domain
if a user wants to link/redirect to another domain.This will require a major version to ensure users supply the new options (related to #779).
In regard to (2) there's an edge case for
localePrefix: 'as-necessary'
anddomains
. The domain is only available at request time, therefore we have to either a) support SSG and potentially patch thehref
ofLink
on the client side or b) require dynamic rendering and return a final URL. This is TBD. Note thatgetPathname
only has "one shot" to return a final URL, which would certainly require reading from headers.It might make sense to introduce a type like
RoutingConfig
that can be consumed both by navigation factory functions as well as the middleware and makes sure that all config is in sync. Also see: https://twitter.com/sebastienlorber/status/1750311808928244168. As part of this, we should leave a code comment in the example to instruct users to check out the middleware matcher docs in case they decide to change thelocalePrefix
option.Describe alternatives you've considered
The problems outlined above are mostly related to
localePrefix: 'as-necessary'
.You can avoid these by either:
localePrefix: 'always'
localePrefix: 'never'
and supplying this to the navigation factory function (already supported)The text was updated successfully, but these errors were encountered: