Dynamic routes | Next.js | Page 1

desert spire Aug 20, 2023, 7:45 PM

#

I am deploying to vercel and the issue is that when I try to use dynamic routes and reload page inside of a dynamic route it only loads a blank html.

On local it works fine but production does not reload the data of the dynamic route for some reason...

It looks like I have to go to homepage and back into the route again to load the data.

mild_panic

azure vectorBOT Aug 20, 2023, 7:45 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

desert spire Aug 20, 2023, 7:48 PM

#

Also, if I try to deploy to S3 buckets as a static website it does not work...

desert spire Aug 20, 2023, 10:33 PM

#

@gusty jasper

brisk riverBOT Aug 21, 2023, 1:18 AM

#

@desert spire

Don't ping or DM other devs you aren't actively talking to

Do not ping other people in order to get attention to your question unless they are actively involved in the discussion. If you're looking to get help, it is a lot better to post your question in a public channel so other people can help or learn from the questions

desert spire Aug 21, 2023, 7:03 AM

#

brisk river <@921533866630590494>

I was in another post.

#

@gusty jasper any idea about this issue?

#

Or what can I do to fix it?

devout kettle Aug 21, 2023, 7:59 AM

#

desert spire I was in another post.

if you meant https://discord.com/channels/752553802359505017/1142932209326620882, then rafael was only discussing on the question in that post, not the question in this post which are two completely unrelated questions. if they are highly relevant to each other then yes, pinging is allowed, but that's not the case here.

#

please don't ping people who are not already discussing the question with you

leaden cave Aug 21, 2023, 9:01 AM

#

Check https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features

Deploying: Static Exports

Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.

desert spire Aug 21, 2023, 9:13 AM

#

leaden cave Check https://nextjs.org/docs/app/building-your-application/deploying/static-exp...

Yes, but for some reason next build does not create the HTML files.

#

$ next build
- info Loaded env from C:\Users\adani\Gametrix\gametrix-ui\.env.local
- info Creating an optimized production build
- info Compiled successfully
- info Linting and checking validity of types
- info Collecting page data
- info Generating static pages (5/5)
- info Finalizing page optimization

Route (app)                                   Size     First Load JS
┌ ○ /                                         4.47 kB         157 kB
├ λ /[game]                                   31.6 kB         144 kB
├ λ /[game]/[profile]                         673 B           102 kB
├ λ /api/[game]/getProfileBy/[username]       0 B                0 B
├ λ /api/[game]/getProfilesListBy/[username]  0 B                0 B
├ ○ /contact                                  1.67 kB         138 kB
└ ○ /favicon.ico                              0 B                0 B
+ First Load JS shared by all                 102 kB
  ├ chunks/596-9e973be57032959f.js            25.8 kB
  ├ chunks/621-d95ea15e4426076e.js            23.4 kB
  ├ chunks/fd9d1056-665ccb1f72c32796.js       50.5 kB
  ├ chunks/main-app-3b0e126cda9af59b.js       214 B
  └ chunks/webpack-0eba1f0469afe8d5.js        1.78 kB

Route (pages)                                 Size     First Load JS
─ ○ /404                                      182 B          75.8 kB
+ First Load JS shared by all                 75.6 kB
  ├ chunks/framework-8883d1e9be70c3da.js      45 kB
  ├ chunks/main-1399dec2869eccd7.js           28.5 kB
  ├ chunks/pages/_app-52924524f99094ab.js     195 B
  └ chunks/webpack-0eba1f0469afe8d5.js        1.78 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

#

This is what gets outputed:

#

So fx: game is never exported as html

leaden cave Aug 21, 2023, 12:25 PM

#

It's treated as being dynamic, are you using cookies() headers() or anything that would make it dynamic? Try making the page static and see if some errors are fired indicating where you make the page dynamic

#

"Dynamic Routes without generateStaticParams()" are not allowed

#

Next.js is not really tailored for this use case of exposing a totally static website

#

you might prefer to use something like Vite

#

all the more that you seem to have an API in this app

desert spire Aug 21, 2023, 3:52 PM

#

leaden cave "Dynamic Routes without generateStaticParams()" are not allowed

I found out why 😂

#

I am using “use client” because of chakra Ui

#

And generateStaticParams() doesn’t support client

#

So I have to switch back to pages

#

Or use tailwind

#

It’s good learning tho

unborn raft Aug 21, 2023, 3:57 PM

#

You can also split server / client components
Keep you server data loading logic server (without 'use client'), move the rest to a custom component with 'use client'

desert spire Aug 21, 2023, 5:18 PM

#

I am trying to make everything with chakra ui navbar etc.

#

It needs a provider that is wrapped in the layout

#

So not really much I can split

#

But pages will do the job

#

Anyhow component libraries are a lazy way of making a website

#

So I might have to get my tailwind skills up to date

#Dynamic routes