Тёмный

From Pages to the App Directory in Next.js 13 (Nested Layouts) 

Sam Selikoff
Подписаться 66 тыс.
Просмотров 13 тыс.
50% 1

Get a sense of working with nested layouts in Next.js 13 by migrating my Discord clone from the app to the pages directory.
🔗 LINKS
Tailwind Mastery course: buildui.com/courses/tailwind-...
Stackblitz from video: stackblitz.com/github/samseli...
🕐 TIMESTAMPS
0:00 - Intro
0:30 - Root layout
1:34 - Index page
2:29 - useParams Hook
4:35 - Making the root layout a RSC
6:40 - Channel page
7:53 - Nested Server layout
11:13 - Making the channel page a RSC
12:59 - Final demo
15:10 - Tailwind Mastery course

Развлечения

Опубликовано:

 

30 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 31   
@alibayatmokhtari
@alibayatmokhtari Год назад
Your content is amazingly useful in real projects. Thanks
@powerofashish215
@powerofashish215 Год назад
I love your content! Both on youtube and on build UI! I would love to learn more about how you navigate so seamlessly in vscode with seemingly just your keyboard. All your favorite / most used shortcuts and setups. Would help us out a ton and thanks for making this content!
@samselikoff
@samselikoff Год назад
Thank you for the feedback - this is currently the most common request I get so I think it’d be silly at this point not to make some content addressing it!
@thepromisebenard
@thepromisebenard Год назад
Thank you Sam. I for one have been asking for your theme and font.
@ndstephens
@ndstephens Год назад
@@samselikoff I've had the same question (regarding your keyboard nav) so just wanted to add another vote for that content. Lifetime member. Just finished the TW course and starting FM. Amazing work. Thank you
@erikplachta
@erikplachta Год назад
❤ app directory - thanks for the video to walking through the process. I just started converting a few of my projects last week. Wish I would have waited to watched this, haha
@sagarchilivery6112
@sagarchilivery6112 Год назад
Love your content, crisp and on the point 💯
@generalwill10
@generalwill10 Год назад
Yea…I think I may have to buy that lifetime membership to get the tailwind and RSC guides…Thanks Sam 🙏🏼👍🏼
@codinginflow
@codinginflow 11 месяцев назад
This was super interesting. I'm also currently in the process of converting a course project from pages/ to app/
@Pyrospower
@Pyrospower Год назад
Great video, thank you for this!
@alexg7282
@alexg7282 Год назад
Thank you !
@raphauy
@raphauy Год назад
Thank you!!!
@user-ty7ss9fi3s
@user-ty7ss9fi3s 11 месяцев назад
Worth it! I have the course, and honestly it's a really unique offering positioned in a class of it's own. Ironically there aren't many resources for things such as framer motion. I find myself going back to buildui to add new tricks to my tool bag or learn things like framer. One of the most impressive things was your D3 server rendered charts , and I've been studying date-fns after building the date picker which eventually I adapted to a date range picker. Now I only want to learn low level primitives, they're very powerful and I feel like I can build anything with them. Would love a recipe section on your essential vscode shortcuts and efficiency tricks - I believe there is a world out there were vs code users can be faster than vim users ha-
@kalebschmottlach4877
@kalebschmottlach4877 Год назад
Your content is so informative, I love it! Any ideas on how to make a 2d drag to reorder component? I have really been struggling to make one
@erikplachta
@erikplachta Год назад
12:01 ❤ - page as a server component by using Page params props instead of useParams
@thepromisebenard
@thepromisebenard Год назад
Awesome video Sam. Please what theme and font are you using for your vscode?
@ogunleyeoluwafemi7243
@ogunleyeoluwafemi7243 Год назад
Great content, always insightful but i have a question for the nested layout, at the moment i am looking at building an app that uses nested layout but how does one go about the mobile aspect of it looking at twitters message section where it has the nested layout and the ability to go back to the main message route , i don't know if i am making any sense but i hope to get a response from you
@vitorgouveia5378
@vitorgouveia5378 Год назад
Please teach about the modal routes that start with "@", i didn't understand that from the Next.js Docs
@oddcircles
@oddcircles Год назад
Can you make a video sharing all the shortcuts you are using with all the pluggins in your vs code?
@waqasabi
@waqasabi Год назад
Great video! Is there a roadmap for Build UI, as in the upcoming courses?
@samselikoff
@samselikoff Год назад
No but that's a great idea + we should definitely add one!
@waqasabi
@waqasabi Год назад
@@samselikoff Yea would be very helpful, the courses on there already look great but would be great to also know what the upcoming courses were, you know as a further incentive to buy the lifetime membership :P
@waqasabi
@waqasabi Год назад
@@samselikoff Maybe they would show up on the /courses page but would have dimmed opacity to indicate not yet available
@DouglasWiseRogers
@DouglasWiseRogers 11 месяцев назад
Question: At 0:47, what is the shortcut that you use to insert a line break after `{children}` without going to the end of the brackets and at the beginning of ``?
@samselikoff
@samselikoff 11 месяцев назад
Shift + O. In vim a lowercase `o` adds newline after cursor, and uppercase `O` inserts one before. So I press `O` twice 👍
@Infante1979
@Infante1979 10 месяцев назад
I am new to next.js . What is best to use pages or app layout? I am confused on what is best...
@subhranshudas8862
@subhranshudas8862 Год назад
Yet to try out the App dir (Next 13). But have been hearing a lot of noise about it being buggy and slow. what was your experience with it?
@som.shekhar
@som.shekhar Год назад
Sam do you not offer Purchasing Power Parity for your courses??
@samselikoff
@samselikoff Год назад
We do, shoot an email to support@buildui.com
@nickolaki
@nickolaki Год назад
What is that organise imports thing? Is it an extension?
@samselikoff
@samselikoff Год назад
Just a VS Code command from the Cmd+Shift+P menu
Далее
Building an Animated Counter with Framer Motion
14:32
Templates vs Layouts in NextJs 13
16:54
Просмотров 13 тыс.
Ummmm We "HAIR" You!
00:59
Просмотров 14 млн
The Story of Next.js
12:13
Просмотров 551 тыс.
Optimistic UI in Remix
38:02
Просмотров 8 тыс.
Incrementally adopt the Next.js App Router
16:21
Просмотров 42 тыс.
Next.js App Router REVIEW (Six Months In Prod)
16:10
Просмотров 59 тыс.
Animating a radial gradient with Framer Motion
18:58
Просмотров 14 тыс.
Reusable Modals with Radix UI
14:31
Просмотров 18 тыс.