How to properly set dynamic route in Next.js when basePath is not root?

[derakhshanfar]

I set up my Next.js project to reside outside of the website root. (I placed it in /app subfolder).

It all worked fine until I started to use dynamic routes for a couple of pages.

I tried in three ways:

<Link href="/project/[project_id]" as="/app/project/project1">
Which returns error Error: The provided 'as' value (/app/project/project1) is incompatible with the 'href' value (/project/[project_id])

<Link href="/project/project1" as="/app/project/project1">
which kind of works (it navigates) but it fails to preload next pages (I get errors 404 - not found for pages linked like this)

<Link href="/app/project/project1" as="/app/project/project1">
Does not work at all.

Does anyone have an idea how to solve this?

[ijjk]

Hi, on the latest version of Next.js you should no longer need to provide href and as and you only need to provide an href value matching the dynamic route e.g. for /blog/[post] you only need to provide an href value of /blog/post-1 now as of v9.5.3 of Next.js.

When using basePath you should not be providing this value in the href or as values as it is automatically handled.

[ijjk]

Have you tried using the official basePath config (related docs), which is meant for this instead of assetPrefix?

For the above to work you should be able to have the below next.config.js

module.exports = {
  basePath: '/blog'
}

and then use next/link like this which maps to the pages/test/[paramName].js file

<Link href='/test/10'>
  <a>to /blog/test/10</a>
</Link>

[derakhshanfar]

Thanks. @ijjk. I set basePath instead of assetPrefix and I changed my nginx config to this:

location /blog/ {        
      proxy_pass http://localhost:3000/blog;   
  }

now I get 404 for all js and styles script

[derakhshanfar]

by the way I have the custom server. it's something like this:
Do you think it has to do with this file?

const express = require('express');
const next = require('next');
const app = next({
  dir: '.', 
  dev,
});
const proxyMiddleware = require('http-proxy-middleware');

const handle = app.getRequestHandler();

let server;
app
  .prepare()
  .then(() => {
    server = express();
  server.listen(port, (err) => {
      if (err) {
        throw err;
      }
      console.log(`> Ready on port ${port} [${env}]`);
    });
}

[derakhshanfar]

@ijjk The problem is related to the Nginx config. because when I go to localhost:port/blog it works perfectly as you mentioned but when I changed the address to localhost/blog I get 404 error for all scripts and js. do you have any workaround for Nginx?

[derakhshanfar]

@ijjk I found the solution! my Nginx config should be this: A big thanks to you

location /blog {        
      proxy_pass http://localhost:3000/blog;   
}