With the next.config.js we can do some neat things, such as multi-SPA routing.<\/p>\n
If you create yourself two Next.js apps, the “main” one is named home<\/em> in my example and the second is a catalog<\/em> and we will be able to navigate to. <\/p>\n Go to the next.config.js of the home<\/em> app. and add the catalog<\/em> changes listed below<\/p>\n in the catalog<\/em> app go to it’s next.config.js and have it look like this<\/p>\n then when you click a hyperlink to your second app it will actually appear as if it’s simply a page on the first app, with the same port.<\/p>\n\r\nconst nextConfig = {\r\n reactStrictMode: true,\r\n async rewrites() {\r\n return [\r\n {\r\n source: '\/:path*',\r\n destination: '\/:path*'\r\n },\r\n {\r\n source: '\/catalog',\r\n destination: 'http:\/\/localhost:3001\/catalog'\r\n },\r\n {\r\n source: '\/catalog\/:path*',\r\n destination: 'http:\/\/localhost:3001\/catalog\/:path*'\r\n },\r\n ]\r\n }\r\n}\r\n<\/pre>\n\r\nconst nextConfig = {\r\n basePath:'\/catalog'\r\n}\r\n<\/pre>\n