If you are looking for a starter check Quick Start
If you also need to use TypeScript check this tutorial
Table of contents
What is thi...
For further actions, you may consider blocking this person and/or reporting abuse
Nice article! Keep it going
An extension to this article will be - how effectively can we css using next js - if you see right now we got a bunch of ways to write the css and there is no definitive guide to do that
Food for thought!
cheers
skt
My pleasure
Thank you Hossein. Your post helped me alot. Keep writing :)
I'm really glad that it was useful for you.
Nice article! I noticed that it's loosely based on the official example as well.
The only problem with this approach is that this set up alone produces ~80kb of shared JS, which is a little scary considering that bundles of about ~100kb or more are already considered heavy by Next.js itself.
By the way, I didn't really noticed any difference (apart from increased bundle size) after adding the recommended set-up. Do you have any idea on why is this needed conceptually?
I think the Idea is that you want to include the styles into the first Response - that means in the original Document your browser recieves.
If you don't do it like that, you can experience flickering when first visiting the page. Depending on how much your page depends on the styles this can be more or less apparent.
As with everywhere, you are facing a trade off here. Do you want to have the styles immediatly on visit? Then you have to accept the larger bundle size.
That sounds about to be right (or, at least, very aligned with what MUI itself says).
What's interesting is that I tried to load my page with JS disabled & without this set-up.
100% of styles were present on the initial page load.
I actually did not read the MUI page before, so i feel very good about my answer haha :D
I think the styles are not loaded via javascript but via style tags. So it should not matter that much if js is enabled or not.
Styles being present on initial page load - im sceptical about this. Maybe its just very fast and you dont notice the "flicker". You can try to throttle network speed on your browser. Or fire a request via postman and see if the actual styles are in the response you see there.
Without the setup the styles should be missing, but there should be a style tag that will load the styles as soon as the browser interprets it.
If the styles are already there, you uncoverd a next.js mystery here ^^
High quality article.
Thx.
You're welcome.
hossein jan faghat ye soali, tadakholi ba chizi nadare in code ha?
سلام به شما
مواردی که گفته شد، تنظیماتی هستن که برای عملکرد صحیح امیوآی داخل نکست ضروری هستن و تداخلی با چیزی ایجاد نمیکنه؛ توی کدها چیزی دور زده نشده که منجر به تداخل بشه و در حقیقت یه مسیر جدید برای عملکرد نکست تعریف شده که کَشِ مربوط به امیوآی رو در هر دو سمت کلاینت و سرور یکسان نگه‌اش داریم.
با این حال اگه جایی به مشکلی برخوردی یا تداخلی ایجاد شده بود از نظرت، منو در جریان بذار، خوشحال میشم کمکت کنم.
ممنون ازت حسین جان. من تازه نکست رو شروع کردم و چیزی از بک اند نمیدونم و هر آموزشی که میبینم یک سری کدهای بک هم داره که من اصلا متوجه نمیشم و گرفتن دیتا مثل ری اکت راحت نیست. نکست واقعا جزو مهارت های فرانت محسوب میشه؟
خواهش میکنم
یکی از دلایلی که باعث شد من بیام سمت نکست این بود که عیب و نقص های ری‌اکت رو نداشت، یه سری موارد داخلش باعث میشه که دیگه نیازی به نصب و کانفیگ پکیج‌های اضافه نباشه. نکست جی اس در کل یه پله فراتر از ری‌اکته چون نواقصی که ری‌اکت داره از جمله موارد مربوط به سئو رو به خوبی حل میکنه و اگه میخوای توی بازار کار موفق‌تر باشی به نظرم نکست میتونه بهت کمک کنه چون که داخل کشور خودمون علاقه به نکست روز به روز بیشتر میشه.
برای اینکه بتونی با بک‌اند کار کنی نیازی نیست کاملاً مسلط به اتفاقای اون سمت باشی، ارتباط با بک‌اند هم میتونه به شیوه‌های مختلفی داخل نکست جی اس پیاده بشه و حتی میتونی همون روشای ری‌اکت رو اینجا هم پیاده کنی.
از اونجایی که میگی تازه استارت زدی نکست رو این چیزا طبیعیه زیاد نگران این نباش که همه مسائل رو متوجه نمیشی اول کار، اولش برا همه سخته؛ حتی اگه چندین سال هم نکست کار کنی بازم به مسائلی بر میخوری که برات جدید باشن و ندونی.
من که از فنای نکست محسوب میشم 😂و هرچی بیشتر باهاش کار میکنم بیشتر متوجه قدرتش و انعطاف‌پذیریش میشم. اگه دوست داشتی آموزش زبان اصلی بهت معرفی کنم یه راه ارتباطی برام بذار من سعی میکنم هم راجع به نکست هم ری‌اکت و هم بک‌اند برات موارد باحالیو بفرستم.
آره خیلی عالی میشه بهم معرفی کنی من همینجوری دارم جسته گریخته از جاهای مختلف یاد میگیرمش مثل همین مقاله ی خودت که تو سرچم بهش برخوردم. این آی دی تلگراممه حسین جان @parham_kns
it's not used anymore? Sorry, all this stuff is kinda confusing.
It should be nice an updated tutorial. Thanks!
Hey Ricardo, Thanks for reading. I hope to find some good free time. This article needs an update as there are updates on Next.js.
Hi ... Nice article
Would you explain the same code for app router? Of course, without using 'use client' !
Hey Reza, Thanks for your feedback.
I need some free time to update this article or post another one to meet the "app" folder of Next.js. I'll let you know about that as soon as it was published.
Shortly about the frequent 'use client' convention in Next.js, as each component is a server component by default, and you have to keep the styles consice between client and server to avoid issues in MUI and Next.js, you need to use that phrase in some cases like the MUI theme related components. However you don't need to use that keyword everywhere as the MUI docs mentioned.
I will clarify where to use and where not to use the 'use client' in that article.