Migration from pages to app

[mrbodich]

Hello. Do you have a plan to migrate your template from the pages to the app next.js directory?

[kitloong]

Hi @mrbodich

Yes it is in my roadmap.

[mrbodich]

Thank you! Do you have any rough estimate? I just need to understand if I can wait a bit or it would take to long.

[kitloong]

Most likely by this or next week.

[kitloong]

I would like to migrate pages to app however, react-bootstrap does not currently offer official support for server-side rendering.
react-bootstrap/react-bootstrap#6475

I am currently stuck here until they release official support, or we may need to explore an alternate package.

[pjanickovic]

hello, any update ?

[kitloong]

Hi @pjanickovic , it is still in progress

[kitloong]

Unable to use dot notation component in server component

react-bootstrap/react-bootstrap#6669
vercel/next.js#51593

[pjanickovic]

@kitloong do you think it has a chance?

I am about to migrate a CRA into nextjs. My app uses bootstrap so your bolierplate seems like a good start.

Thx

[kitloong]

Hi @pjanickovic Please check out the main branch for app routers

[pjanickovic]

Thanks, Great job, btw are you sticking with react-bootstrap? For this new project I am planning and considering nextjs, reading different webs bootstrap does not seem like an ideal solution for nextjs especially when it comes to SSR. But honestly I am not sure what to use, spend hours now comparing Ui libs. Do you have any experience with this? Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Kit Loong ***@***.***> Sent: Wednesday, December 27, 2023 3:00:53 PM To: kitloong/nextjs-dashboard ***@***.***> Cc: pjanickovic ***@***.***>; Mention ***@***.***> Subject: Re: [kitloong/nextjs-dashboard] Migration from pages to app (Issue #14) Hi @pjanickovic<https://github.com/pjanickovic> Please check out the main branch for app routers — Reply to this email directly, view it on GitHub<#14 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A2QYHEH5QYUM6OBLQNB2BP3YLQSZDAVCNFSM6AAAAAAYRAPQ6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZQGMZTENZXGA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[kitloong]

In my personal preference, I find the CoreUI styling and its mobile phone view design, especially the sidebar navigation for different views, quite appealing. I opt for react-bootstrap due to CoreUI being built with Bootstrap.

I like the idea of Tailwind CSS. I will use utility classes whenever it is possible, as indicated in the source code.

However, the migration from Bootstrap to Tailwind is time-consuming, considering to keep the current look and feel.
Therefore, I'll stick with Bootstrap for the time being.

The "First Load JS shared by all" of Bootstrap is actually not too bad.

Bootstrap

First Load JS shared by all            81.9 kB
  ├ chunks/304-2c813878acae82de.js       26.7 kB
  ├ chunks/db04793a-7454ef3286dc9a39.js  53.3 kB
  ├ chunks/main-app-5ca2ca3509950073.js  218 B
  └ chunks/webpack-bdda0116d5d2c410.js   1.74 kB

Vanilla Next.JS

+ First Load JS shared by all            81.8 kB
  ├ chunks/402-67f396e5bf753411.js       26.7 kB
  ├ chunks/d6e4f393-23d47c90565b18f6.js  53.3 kB
  ├ chunks/main-app-79184e85c53ddfb2.js  220 B
  └ chunks/webpack-0827b8f6e3e08c17.js   1.64 kB

But of course, there is overhead to downloading a total 40kb of bootstrap.css (sadly, I can't find a proven way to purge the CSS), and possible another 10kb for bootstrap.js depending on usage, take it as trade-off for the time saved on building styling from scratch.

I think the team members learning curve and future maintenance cost should be taken into account too if you are building an enterprise-ready product.

These opinions are personal, and I welcome any suggestions.

[pjanickovic]

well said, but still, SSR (Server Side Rendering) support does not work well,

I see you did not add the to wrap the app, what that intentional ? (link: https://react-bootstrap.netlify.app/docs/getting-started/server-side-rendering/)

when I add it, I implicitly need to add "use client" because Bootstrap relays on the context (the long thread you posted above has a heavy discussion).

I agree the footprint for both is quite ok, even when i count the css.

My case is I have been working on an internal dashboard, which in 2 years grew significantly, now accomodating data from various internal systems, support processes etc. currently built on CRA, and I know it will grow more, so I am looking for a right approach.

Preliminary I choose nextjs because of new support for SSR, RSC, and seems Bootstrap is not a match for this.

[kitloong]

SSRProvider is not needed in React 18 or above. Next.JS server component and client component are ssr by default.

[pjanickovic]

Really ?? I spent hours of browsing about this but you are the first to mention this Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Kit Loong ***@***.***> Sent: Sunday, December 31, 2023 7:01:02 AM To: kitloong/nextjs-dashboard ***@***.***> Cc: pjanickovic ***@***.***>; Mention ***@***.***> Subject: Re: [kitloong/nextjs-dashboard] Migration from pages to app (Issue #14) SSRProvider is not needed in React 18 or above. Next.JS server component and client component are ssr by default. — Reply to this email directly, view it on GitHub<#14 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A2QYHEEE6PB4BNVTLOB2FT3YMD5R5AVCNFSM6AAAAAAYRAPQ6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZSGY3TSOJRGI>. You are receiving this because you were mentioned.Message ID: ***@***.***>