Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Next.js Catch-all Routes Not hydrated in Production #541

Closed
inadeqtfuturs opened this issue Jul 19, 2021 · 2 comments
Closed

Next.js Catch-all Routes Not hydrated in Production #541

inadeqtfuturs opened this issue Jul 19, 2021 · 2 comments

Comments

@inadeqtfuturs
Copy link

inadeqtfuturs commented Jul 19, 2021 •
edited
Loading

Describe the bug
We have a NextJS app that uses NetlifyCMS as the backend. We have a catch-all [...slug].js that handles generic routes as well as pages that handle specific routes. In both cases, these pages are wrapped in the same _app.js as well as a Layout component that preloads fonts and analytics (you can see this in the head of the /homepass/ route below).

Pages made via file based routing work on production, however pages generated by [...slug].js don't seem to be working. They don't throw a 404, but they also don't load any JS.

These [...slug].js pages work locally running next dev, as well as running next build && next start. They also work as expected when running netlify dev.

To Reproduce
Steps to reproduce the behavior:
Page generated with /homepass/index.js: https://60f5f123b56f86000722e3b1--plume-new-shop.netlify.app/homepass
Page generated with [...slug].js: https://60f5f123b56f86000722e3b1--plume-new-shop.netlify.app/homepass/shop

It also look like some of the chunks that are present in the html from a local netlify build are not present when hitting the /homepass/shop route. Below is the head from the shop.html file. Note that the chunks aren't present when hitting the route. Similar chunks are present when hitting the /homepass route.

<head>
  <meta charSet="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <meta name="next-head-count" content="2"/>
  <link rel="preload" href="/_next/static/css/0a9b5017bb86c6d6d0d4.css" as="style"/>
  <link rel="stylesheet" href="/_next/static/css/0a9b5017bb86c6d6d0d4.css" data-n-g=""/>
  <noscript data-n-css=""></noscript>
  <script defer="" nomodule="" src="/_next/static/chunks/polyfills-a54b4f32bdc1ef890ddd.js">
  </script><script src="/_next/static/chunks/webpack-ab5a8de0364332653952.js" defer=""></script>
  <script src="/_next/static/chunks/framework-c93ed74a065331c4bd75.js" defer=""></script>
  <script src="/_next/static/chunks/main-dffd1de1eb936205c3df.js" defer=""></script>
  <script src="/_next/static/chunks/pages/_app-b00df0a79317fa123a7e.js" defer=""></script>
  <script src="/_next/static/chunks/pages/%5B...slug%5D-4ab3838ffbebd37ca119.js" defer=""></script>
  <script src="/_next/static/pHFfwXOnWJl8pY86rO_7I/_buildManifest.js" defer=""></script>
  <script src="/_next/static/pHFfwXOnWJl8pY86rO_7I/_ssgManifest.js" defer=""></script>
  <style data-styled="" data-styled-version="5.3.0"></style>
</head>

Expected behavior
Pages generated by [...slug].js should exhibit the same behavior as those made by file system specific pages.

Versions

  • Next.js: 11.0.0
  • plugin (if installed at fixed version): N/a (uninstalled to use latest on build)

If you're using the CLI to build

  • OS: Mac
  • netlify/cli version: 4.4.2

If you're using file-based installation

  • netlify.toml:
# Settings in the [build] context are global and are applied to all contexts
# unless otherwise overridden by more specific contexts.
[build]
  # Directory (relative to root of your repo) that contains the deploy-ready
  # HTML files and assets generated by the build. If a base directory has
  # been specified, include it in the publish directory path.
  publish = "out"

  # Default build command.
  command = "yarn build"

  # Directory with the serverless Lambda functions to deploy to AWS.
  functions = "functions"

[dev]
  command = "yarn dev"
  functions = "functions"
  framework = "#auto"
@ascorbic
Copy link
Contributor

Hi,
Can you check that this issue still exists? There was a bug in the proxy server that has now been fixed.

@inadeqtfuturs
Copy link
Author

Hi,

Thanks for the response.

This actually ended up just being an issue with asset optimization. Rereading the Next.js on Netlify docs, we say that Netlify asset optimization can cause build issues. Turning off 'Bundle JS' and 'Minify JS' in our 'Build and Deploy' settings did the trick.

Thanks much!

serhalp pushed a commit that referenced this issue Jun 13, 2024
@mrstork @pieh
fix: manually triggered notFound pages in page-router for older versi…

Verified

This commit was signed with the committer’s verified signature.
renovate-bot Mend Renovate
GPG key ID: 81C63AE1C224182B
Verified
Learn about vigilant mode
30ef981 
…ons of next (#541)

* test: update simple-app fixture to have clearer route and to use custom 404

* fix: improve parallel route matching when building server cache

---------

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ascorbic @inadeqtfuturs