`basePath` appended twice while routing in an app incrementally migrating to `app` router

Question

Hi all,I have a pages application I've been working on migrating to the app router, specifically to take advantage of the the new generateMetadata function. So far I have migrated one page (src/app/picks/[id]/page.tsx) to the new router. In a separate page in the existing project, some router.push() events appear to be appending the basePath defined in my nextjs config twice, even when the source and destination pages are both in the pages directory (e.g., going from src/pages/groups.tsx to src/pages/groups/[id]/index.tsx).As a result this appends my basePath twice in the URL (so... test.com/basepath/groups is supposed to route to test.com/basepath/group/123 but instead goes to test.com/basepath/basepath/group/123), causing a 404 that I can't resolve. Forcing shallow: true in the places I'm seeing this solves the problem but I'm not sure what the core issue is. Removing the entire src/app directory solves the problem in all cases, so I'm inclined to think it's an issue with my migration, although I can't seem to pin it down.Does this sound familiar to anyone? happy to share parts of my config if needed. Thanks so much for your time.

Masai Lion · Answer

possibly the relevant portion of next.config.js:const BASEPATH = PRODUCT === "wbcg" ? "/basepath1" : "/basepath2";

const moduleExports = {
  reactStrictMode: false,
  compiler: {
    styledComponents: true,
  },
  experimental: {
    forceSwcTransforms: true,
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

return config;
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "[client].com",
        port: "",
      },
    ],
  },
  basePath: BASEPATH,
  env: {
    BUILD_ENV: process.env.ENVIRONMENT,
  },
  trailingSlash: true,
  async redirects() {
    return [
      {
        source: "/bracket-iq",
        basePath: false,
        destination: `${BASEPATH}/bracket-iq`,
        permanent: true,
      },
      {
        source: "/picks/bracket/:slug",
        basePath: false,
        destination: `${BASEPATH}/picks/bracket/:slug`,
        permanent: true,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: `${API_BACKEND_URL}/api/:path*`,
      },
    ];
  },
};

`basePath` appended twice while routing in an app incrementally migrating to `app` router

2 Replies