search

kitloong / nextjs-dashboard

A Next.JS boilerplate with the famous Open Source Boostrap Admin Template, CoreUI.
https://nextjs-dashboard-olive.vercel.app
MIT License
591 stars 224 forks source link

Migration from pages to app #14

Closed mrbodich closed 10 months ago

mrbodich commented 1 year ago

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

kitloong commented 1 year ago

Hi @mrbodich

Yes it is in my roadmap.

mrbodich commented 1 year ago

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 commented 1 year ago

Most likely by this or next week.

kitloong commented 1 year ago

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

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

pjanickovic commented 10 months ago

hello, any update ?

kitloong commented 10 months ago

Hi @pjanickovic , it is still in progress

kitloong commented 10 months ago

Unable to use dot notation component in server component

https://github.com/react-bootstrap/react-bootstrap/issues/6669 https://github.com/vercel/next.js/issues/51593

pjanickovic commented 10 months ago

@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 commented 10 months ago

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

pjanickovic commented 10 months ago

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 Androidhttps://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 @pjanickovichttps://github.com/pjanickovic Please check out the main branch for app routers

— Reply to this email directly, view it on GitHubhttps://github.com/kitloong/nextjs-dashboard/issues/14#issuecomment-1870332770, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A2QYHEH5QYUM6OBLQNB2BP3YLQSZDAVCNFSM6AAAAAAYRAPQ6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZQGMZTENZXGA. You are receiving this because you were mentioned.Message ID: @.***>

kitloong commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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

pjanickovic commented 10 months ago

Really ?? I spent hours of browsing about this but you are the first to mention this

Get Outlook for Androidhttps://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 GitHubhttps://github.com/kitloong/nextjs-dashboard/issues/14#issuecomment-1872679912, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A2QYHEEE6PB4BNVTLOB2FT3YMD5R5AVCNFSM6AAAAAAYRAPQ6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZSGY3TSOJRGI. You are receiving this because you were mentioned.Message ID: @.***>