Feature/243 base path #589

Robjam · 2023-10-31T02:35:43Z

This PR add support for basePath in the next-intl configuration and solves #243.
Documentation regarding middleware is also included (59f25d1).

vercel · 2023-10-31T02:35:47Z

@Robjam is attempting to deploy a commit to the next-intl Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2023-10-31T02:35:49Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-intl-example-next-13	❌ Failed (Inspect)			Nov 9, 2023 0:46am

amannn · 2023-11-02T17:50:43Z

Thank you so much for looking into this @Robjam! I was on vacation the last few days and need to catch up on a few things. I'll look into this PR next week and get back to you!

mwhiter · 2023-11-07T17:31:50Z

Will be watching this PR, our team is running into issues with basePath as well and would like to see this merged in.

Let me know if there's anything we can do to help support this fix, seems like a very important feature to include in next-intl.

nextjs-stonks · 2023-11-07T19:16:47Z

Hi @amannn, would you be able to provide an ETA for this PR to be reviewed and subsequently fix the issue with utilizing basePath ? Our team is also running into issues with utilizing the library and would appreciate for a fix to be put out as soon as possible :)

amannn

Thank you so much for your work here! So cool! 👏

I found that NextRequest.pathname already excludes the basePath. I think if we're careful to construct all URL objects with that pathname, then we could remove many checks.

I think adding the basePath should mostly be relevant for the alternate links, but less for rewrite/redirect logic if we're careful.

Let me know what you think!

amannn · 2023-11-08T18:13:28Z

packages/next-intl/test/middleware/getAlternateLinksHeaderValue.test.tsx

+describe.each([
+  { basePath: undefined },
+  { basePath: '/sample' }
+])('when basePath is $basePath', ({ basePath }: { basePath: string }) => {


Cool idea with describe.each!

TypeScript reports an error for me here:

test/middleware/getAlternateLinksHeaderValue.test.tsx(11,34): error TS2345: Argument of type '({ basePath }: { basePath: string; }) => void' is not assignable to parameter o… Types of parameters '__0' and 'args' are incompatible. Type '{ basePath: undefined; } | { basePath: string; }' is not assignable to type '{ basePath: string; }'. Type '{ basePath: undefined; }' is not assignable to type '{ basePath: string; }'. Types of property 'basePath' are incompatible. Type 'undefined' is not assignable to type 'string'.

(see also the failing build)

Does basePath need to be undefined here? It appears in NextIntlMiddlewareConfig.tsx, this property is defined as non-optional, so would we just want a default / here to test instead, or should the MiddlewareConfigWithDefaults type be updated to accept undefined?

The tests rely on a reference to basePath to do string concatenation; if the intention is for basePath to be undefined here, you may want to have another param here called expectedPath or something that will be defined (empty string in the case basePath is undefined) to use instead.

good point!
This already has a default set and so / is a better case.

amannn · 2023-11-08T18:38:45Z

docs/pages/docs/routing/middleware.mdx

+  // Use `basepath` to deploy to a sub-path like `/blog`.
+  // Typically `basePath` is set to the same value in
+  // `next.config.js` options
+  basePath: '/blog',


Thanks for proposing docs too!

We can move this to a separate section below (see "Further configuration").

amannn · 2023-11-08T18:40:23Z

packages/next-intl/src/middleware/getAlternateLinksHeaderValue.tsx

@@ -6,6 +6,11 @@ import {getHost, isLocaleSupportedOnDomain} from './utils';

 function getUnprefixedUrl(config: MiddlewareConfig, request: NextRequest) {
  const url = new URL(request.url);
+
+  if (config.basePath && !url.pathname.startsWith(config.basePath)) {


Do we need this check for config.basePath if we have '' as a default for basePath? Maybe a smart default helps us to avoid unnecessary conditions.

About the second part of the condition: request.pathname doesn't seem to include the basePath (just tested in an app), can we remove this part of the condition too?

amannn · 2023-11-08T18:46:20Z

packages/next-intl/test/middleware/getAlternateLinksHeaderValue.test.tsx

 it('works for prefixed routing (as-needed)', () => {
  const config: MiddlewareConfigWithDefaults = {
    defaultLocale: 'en',
    locales: ['en', 'es'],
    alternateLinks: true,
    localePrefix: 'as-needed',
-    localeDetection: true
+    localeDetection: true,
+    basePath


I currently get some failing tests in this file.

amannn · 2023-11-08T18:53:12Z

packages/next-intl/src/middleware/NextIntlMiddlewareConfig.tsx

@@ -1,6 +1,9 @@
 type LocalePrefix = 'as-needed' | 'always' | 'never';

 type RoutingBaseConfig = {
+  /** The base path of your application (optional). */
+  basePath?: string;


In case this lands after #149, we could use the new plugin to automatically set this value based on basePath in next.config.js. I think something like webpack.DefinePlugin could work. I can't really think of a use case where the user would want a different value here than what is configured in Next.js.

We can think about this as the last step though when everything else works.

I noticed the basePath is available on the request object:

import type { NextRequest } from 'next/server' export function middleware(request: NextRequest) { // Either '' (default) or a value like '/test' console.log({basePath: request.nextUrl.basePath}); }

That way we don't have to make this configurable in the first place.

As mentioned in the other comment, I think we only need it for the alternate links though.

amannn · 2023-11-08T19:03:08Z

packages/next-intl/src/middleware/getAlternateLinksHeaderValue.tsx

@@ -73,6 +80,10 @@ export default function getAlternateLinksHeaderValue(
          localizePathname(url);
        }

+        if(config.basePath && !url.pathname.startsWith(config.basePath)) {


There are btw. some small formatting issues, you can fix them via ESLint:

pnpm eslint src test --fix

… or autofix them on save in case you use VSCode:

"[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint", "editor.formatOnSave": true },

I should really consider setting up https://github.com/wearerequired/lint-action to make it easier for contributors.

Thanks for the how-to on setting up VsCode.
Opening VSCode from the repository root path gives an error with Parsing error: Cannot read file '/users/robjam/code/community/next-intl/tsconfig.json'. eslint so I use the cli to format things. Maybe we can fix this with a root tsconfig.json and extend it from each workspace?

My understanding of monorepos is that individual folders should be opened when working inside of them. E.g. when working on the next-intl package, you'd open this as your workspace root. If that isn't the case, ESLint will not work correctly.

I've added an info about this to the contributors guide for now.

amannn · 2023-11-08T19:09:56Z

packages/next-intl/src/middleware/NextIntlMiddlewareConfig.tsx

@@ -37,6 +40,7 @@ export type MiddlewareConfigWithDefaults = MiddlewareConfig & {
  alternateLinks: boolean;
  localePrefix: LocalePrefix;
  localeDetection: boolean;
+  basePath: string;


I did a first test with example-next-13 in the repo. With localePrefix: 'always' this already seems to work quite well! Pretty cool that Link automatically considers the basePath if it's set in next.config.js (source).

With localePrefix: 'as-necessary' I run into infinite redirects though when trying to access the app root. Can you reproduce that?

I didn't test locally with localePrefix: 'as-necessary' as we require the locale to be in the path. I'll scaffold a new next app and reproduce it.

amannn · 2023-11-08T19:13:41Z

packages/next-intl/src/middleware/middleware.tsx

@@ -68,7 +69,10 @@ export default function createMiddleware(config: MiddlewareConfig) {
    }

    function rewrite(url: string) {
-      return NextResponse.rewrite(new URL(url, request.url), getResponseInit());


I think the problem here is the construction with request.url. If we apply request.pathname then maybe we can avoid introducing more conditions.

amannn · 2023-11-08T19:14:46Z

packages/next-intl/src/middleware/middleware.tsx

@@ -93,7 +97,7 @@ export default function createMiddleware(config: MiddlewareConfig) {
              bestMatchingDomain.defaultLocale === locale &&
              configWithDefaults.localePrefix === 'as-needed'
            ) {
-              urlObj.pathname = urlObj.pathname.replace(`/${locale}`, '');
+              urlObj.pathname = urlObj.pathname.replace(`${configWithDefaults.basePath}/${locale}`, '');


Also here above we're using request.url, which includes the basePath.

amannn · 2023-11-08T19:16:20Z

packages/next-intl/src/middleware/middleware.tsx

      return NextResponse.redirect(urlObj.toString());
    }

    let response;
    if (isRoot) {
-      let pathWithSearch = `/${locale}`;
+      let pathWithSearch = `${configWithDefaults.basePath}/${locale}`;


Maybe we can avoid this change too, pathWithSearch is passed to rewrite and redirect below, which—as mentioned above—could likely be adjusted to automatically consider the basePath.

amannn · 2023-11-23T15:28:54Z

Hey @Robjam, did you have another minute to look into this?

next-intl 3.0 has been released in the meantime with support for Server Components, as well as some improvements for the middleware. It seems like that has caused some conflicts with this PR. Can you figure out how to incorporate the changes or can I help with something?

kjxbyz · 2023-11-23T16:22:47Z

When will this pr be merged? This feature is very important to me.

FlorianLeChat · 2023-11-30T09:44:15Z

Due to lack cookie customization mentioned with #486, I think the base path should also be natively supported in the response cookie in order to make it only available to the desired base path and not to the entire domain since this can cause conflicts between websites of the same domain.

For now, I'm sticking with this workaround but a native support would be welcome to be included in this pull request.

const response = handleI18nRouting( request );
response.cookies.set(
	"NEXT_LOCALE",
	response.headers.get( "x-middleware-request-x-next-intl-locale" ) ?? defaultLocale,
	{
		path: process.env.__NEXT_ROUTER_BASEPATH,
		maxAge: 60 * 60 * 24 * 365,
		sameSite: "strict"
	}
);

return response;

amannn · 2023-12-06T08:11:10Z

@Robjam This PR became a bit stale. As this is currently the most requested feature on the issue tracker, I'll help out here to complete the feature. Hope this is ok for you!

Ref: #699

@Robjam

by @Robjam and @amannn) There's no need for a new config option, `next-intl` will automatically pick up the `basePath` you've configured in `next.config.js`. Note however that you should make sure that you match `/` explicitly in your middleware `matcher` (see [the updated docs](https://next-intl-docs.vercel.app/docs/routing/middleware#base-path)). The only integration points are: - Apply the `basePath` for redirects, as Next.js doesn't handle this internally - Apply the `basePath` for rewrites, as Next.js doesn't handle this internally - Apply the `basePath` for alternate links This PR is based on the initial work in #589 by @Robjam Closes #589 Closes #243 --------- Co-authored-by: Robjam <rjames@smartshopping.co.jp> Co-authored-by: James Roberts <github@robjam.dev>

Robjam added 2 commits October 31, 2023 10:54

feat: Add basePath to configuration

ae7c8d5

docs: Add basePath to createMiddleware config

59f25d1

vercel bot had a problem deploying to Preview – next-intl-example-next-13 October 31, 2023 02:36 Failure

Robjam mentioned this pull request Oct 31, 2023

Middleware: Support for basePath in the app directory #243

Closed

amannn reviewed Nov 8, 2023

View reviewed changes

Merge branch 'amannn:main' into feature/243-base-path

3e751ee

vercel bot had a problem deploying to Preview – next-intl-example-next-13 November 9, 2023 00:46 Failure

amannn mentioned this pull request Dec 6, 2023

feat: Add support for basePath in middleware and navigation APIs #699

Merged

amannn closed this in #699 Dec 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/243 base path #589

Feature/243 base path #589

Robjam commented Oct 31, 2023

vercel bot commented Oct 31, 2023

vercel bot commented Oct 31, 2023 •

edited

Loading

amannn commented Nov 2, 2023

mwhiter commented Nov 7, 2023

nextjs-stonks commented Nov 7, 2023

amannn left a comment

amannn Nov 8, 2023

mwhiter Nov 8, 2023

Robjam Nov 10, 2023

amannn Nov 8, 2023

amannn Nov 8, 2023

amannn Nov 8, 2023

amannn Nov 8, 2023

amannn Nov 28, 2023

amannn Nov 8, 2023

Robjam Nov 10, 2023

amannn Nov 13, 2023

amannn Nov 8, 2023

Robjam Nov 10, 2023

amannn Nov 8, 2023

amannn Nov 8, 2023

amannn Nov 8, 2023

amannn commented Nov 23, 2023

kjxbyz commented Nov 23, 2023

FlorianLeChat commented Nov 30, 2023

amannn commented Dec 6, 2023 •

edited

Loading

Feature/243 base path #589

Feature/243 base path #589

Conversation

Robjam commented Oct 31, 2023

vercel bot commented Oct 31, 2023

vercel bot commented Oct 31, 2023 • edited Loading

amannn commented Nov 2, 2023

mwhiter commented Nov 7, 2023

nextjs-stonks commented Nov 7, 2023

amannn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amannn commented Nov 23, 2023

kjxbyz commented Nov 23, 2023

FlorianLeChat commented Nov 30, 2023

amannn commented Dec 6, 2023 • edited Loading

vercel bot commented Oct 31, 2023 •

edited

Loading

amannn commented Dec 6, 2023 •

edited

Loading