Next.js: getStaticPaths 404 on local "dev", working with build or on Vercel

[riccardogiorato]

Bug report

Describe the bug

I can't access the basic routes inside a dynamic named folder on "dev" but it works on a build.
I can't access the "/en/" and "/it/" page that should be generated from this file:

• https://github.com/Giorat/nextjs_routing_issues/blob/master/pages/%5Blang%5D/index.js
  But I can access all the children of "it" and "en" folder correctly.

I'm trying to test out a simple dynamic folder structure to handle different langs with these routes:

• "/": homepage
• "/en": english page
• "/it": italian page
  To achieve this I created a dynamic "[lang]" folder and inside it an index.js where I defined the getStaticPaths: https://github.com/Giorat/nextjs_routing_issues/blob/master/pages/%5Blang%5D/index.js

After these 3 simple routes, I also added a nested route for:

• "/en/blog": https://github.com/Giorat/nextjs_routing_issues/blob/master/pages/%5Blang%5D/blog/index.js
• "/it/category/frozen": https://github.com/Giorat/nextjs_routing_issues/blob/master/pages/%5Blang%5D/category/%5Bcategory%5D.js
• "/en/category/brexit": https://github.com/Giorat/nextjs_routing_issues/blob/master/pages/%5Blang%5D/category/%5Bcategory%5D.js

To Reproduce

Steps to reproduce the behavior:

1. Go to this Repository: https://github.com/Giorat/nextjs_routing_issues
2. Run it locally by cloning or on CodeSandbox here: https://codesandbox.io/s/github/Giorat/nextjs_routing_issues
3. Run it locally with "yarn dev" and try going to /it or /en routes.

Expected behavior

Without the fallback set to true I should be able to visit the nested dynamic route cause I defined these 2 paths in the getStaticPaths, but locally will always give me 404.
On Vercel the build works and I can access the 2 routes:

• https://nextjs-routing-issues.now.sh/it/
• https://nextjs-routing-issues.now.sh/en/
  But locally they always redirect to 404.

System information

• OS: Windows and Linux
• The version of Next.js: 4.9.2

[filipesmedeiros]

You should be able to open /it, etc. The 404 comes from the route /it/.

So just use the href without the trailing slash and should work!

[filipesmedeiros]

Also: I have no idea why it works when deployed but not on dev, maybe it's because of the way the routing works and how, locally, getStaticPaths and Props is called everytime, not really static I think.

[riccardogiorato]

Also: I have no idea why it works when deployed but not on dev, maybe it's because of the way the routing works and how, locally, getStaticPaths and Props is called everytime, not really static I think.

I think anyway that this issue should be fixed to prevent having different behaviours when you build a project locally or when you push it to the hosting/server provider.

[filipesmedeiros]

I agree at least dev and Vercel should behave and similarly as possible. Maybe it's easy to fix, let's see what the contributors say. I can take a look whenever I have time.

[uhrohraggy]

FWIW am also receiving this. Build works perfectly on vercel but not locally. Only error in dev is not having a pages directory, but adding it removes the error but still has the same behavior of not routing correctly. Everything is a 404.

ready - started server on http://localhost:3000
info  - Loaded env from .env
Error: > Couldn't find a `pages` directory. Please create one under the project root
    at findPagesDir (/Users/userfoo/foobar/node_modules/next/dist/lib/find-pages-dir.js:3:170)
    at new DevServer (/Users/userfoo/foobar/node_modules/next/dist/server/next-dev-server.js:1:4321)
    at createServer (/Users/userfoo/foobar/node_modules/next/dist/server/next.js:2:300)
    at start (/Users/userfoo/foobar/node_modules/next/dist/server/lib/start-server.js:1:323)
    at nextDev (/Users/userfoo/foobar/node_modules/next/dist/cli/next-dev.js:21:279)
    at commands.(anonymous function).then.exec (/Users/userfoo/foobar/node_modules/next/dist/bin/next:28:339)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at findNodeScript.then.existing (/usr/local/lib/node_modules/npm/node_modules/libnpx/index.js:268:14)
> [debug] [2020-06-21T18:50:16.036Z] No builders were updated

Pretty simple package.json:

{
  "name": "foobar",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "format": "npm-run-all format:*",
    "format:js": "prettier --write {.,**}/*.js",
    "format:json": "prettier --write {.,**}/*.json",
    "format:md": "prettier --write {.,**}/*.md",
    "format:ts": "prettier --write {.,**}/*.{ts,tsx} && tslint --fix -p .",
    "patch-package": "patch-package",
    "postinstall": "yarn patch-package"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/baz/foobar.git"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "workspaces": {
    "packages": [
      "apps/**",
      "packages/**"
    ]
  },
  "devDependencies": {
    "husky": "^4.2.1",
    "patch-package": "^6.2.0",
    "pretty-quick": "2.0.1",
    "prettier": "^1.19.1",
    "solidarity": "^2.3.1",
    "typescript": "^3.7.5",
    "tslint": "^5.20.1",
    "tslint-config-prettier": "^1.18.0"
  }
}

and now.json

{
  "version": 2,
  "builds": [{ "src": "apps/conventions-www/package.json", "use": "@now/next" }],
  "rewrites": [{ "source": "/(.*)", "destination": "/apps/foobar-www/$1" }]
}

[riccardogiorato]

@uhrohraggy do you have a public repository with this error?

[lennerd]

Did you notice that you get 404 on your deployed example, too? Just visit https://nextjs-routing-issues.now.sh/ and watch the requests in your dev tools. Two files it.js and en.js are requested. This also leads to a complete new request when navigating to subpages.

[lennerd]

Forget that. You're not using <Link /> correctly. You need to combine both props as and href when linking to dynamic pages.

For example:

<Link href="/[lang]" as="/it">
  <a>Italian</a>
</Link>

Always missing this myself … 🙈

[Timer]

OP issue should be fixed on next@canary. Thanks!