Next JS Project Structure: Patterns and Techniques for Success

Code Ryan

Player FM - Internet Radio Done Right

اضافه شده در two سال پیش

محتوای ارائه شده توسط Ryan Solomon. تمام محتوای پادکست شامل قسمت‌ها، گرافیک‌ها و توضیحات پادکست مستقیماً توسط Ryan Solomon یا شریک پلتفرم پادکست آن‌ها آپلود و ارائه می‌شوند. اگر فکر می‌کنید شخصی بدون اجازه شما از اثر دارای حق نسخه‌برداری شما استفاده می‌کند، می‌توانید روندی که در اینجا شرح داده شده است را دنبال کنید.https://fa.player.fm/legal

Most Innovative Companies

1
Sweetgreen's CEO explains why his salads are so expensive 1:12:26

۸ روز پیش1:12:26

پخش در آینده

لیست ها

پسندیدن

دوست داشته شد

1:12:26

On today's episode, co-hosts Yasmin Gagne and Josh Christensen discuss the latest news in the world of business and innovation, including Apple’s newest product announcements at WWDC, Warner Bros. Discovery’s split back into two companies, and the U.S. and China meeting in London to discuss trade talks. Next, since its inception in 2008, NPR's Tiny Desk Concerts have become a staple on YouTube with over 11 million subscribers. Josh and Yaz speak with Fast Company associate editor David Salazar about the lasting influence, favorite acts, and future programming of Tiny Desk Concerts. Finally, Yaz and Josh interview Sweetgreen CEO Jonathan Neman about the company's new menu items, advancements in culinary technology like Infinite Kitchens, and the removal of seed oils from their food preparation process. For more of the latest business and innovation news, go to https://www.fastcompany.com/news To read David Salazar’s piece on NPR’s Tiny Desk concerts: https://www.fastcompany.com/91337277/npr-tiny-desk-concert-artist-impact…

۲ سال پیش 11:23

MP3•خانه قسمت

In this in-depth video tutorial, we dive into the world of Next JS project structure and explore best practices for building robust and scalable web applications. Whether you're a beginner or an experienced developer, understanding how to organize your Next JS projects effectively is crucial for code maintainability, collaboration, and performance optimization. Join us as we demystify the complexities of Next JS project structure and provide you with practical insights, tips, and techniques to streamline your development process. From choosing the right folder structure to architecting components, this video covers it all.

296 قسمت

#Tech #Ryan Solomon

Next JS Project Structure: Patterns and Techniques for Success

Code Ryan

published ۲ سال پیش

اشتراک گذاری

MP3•خانه قسمت

296 قسمت

#Tech #Ryan Solomon

همه قسمت ها

1
Stop Using useEffect For This In React 6:11

1 day پیش6:11

6:11

Today, I cover an anti-pattern with using the useEffect hook in React.js

1
5 JavaScript Tricks You Wish You Knew Sooner 10:24

۵ روز پیش10:24

10:24

1
This One Line Makes Your Next.js App Feel Instant ⚡ 10:06

۹ روز پیش10:06

10:06

Docs: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching

1
Controlled vs Uncontrolled Components in React | Explained Clearly 9:06

12 روز پیش9:06

9:06

Struggling to understand the difference between controlled and uncontrolled components in React? In this video, I'll walk you through simple examples of both, explain when you should use each, and show you the real-world pros and cons. 📚 What you'll learn: What a controlled component is What an uncontrolled component is How to implement both types of inputs Which approach is better for different situations Whether you're building simple forms or complex user interfaces, mastering this concept will make your React apps cleaner and easier to maintain. #react #webdevelopment #reactjs…

1
An Anti-Pattern To Avoid In React.js 3:51

19 روز پیش3:51

3:51

TLDR; don't mutate state directly. Always use setState when updating a piece of state. Also, pass a function when updating state based on previous state.

1
This Causes An Error In Next.js 4:17

23 روز پیش4:17

4:17

Today I explain a key point regarding server and client components in Next.js and passing props. Also, I explain what you should know regarding client boundaries in Next.js

1
An AI Tool That's Actually Worth It For Developers 7:32

26 روز پیش7:32

7:32

Docs: https://www.korbit.ai/ I'm not affiliated with this tool in any way. We've just found it useful the last few months using it on our team. If you know any tools, or even something better than Korbit, let me know in the comments below.

1
This One Fix Makes Your Next.js App Faster and Cleaner 8:48

30 روز پیش8:48

8:48

Learn the recommended way to fetch data in Next.js as well as some patterns to know about client and server components.

1
Learn Modern React.js In 20 Minutes 20:43

۵ weeks پیش20:43

20:43

In todays video, I cover the core concepts of React.js in about 20 minutes. Of course, this isn't everything you need to know. But it is a good starting place and review for some.

1
What "use client" Really Does In Next.js 10:17

۵ weeks پیش10:17

10:17

docs: https://nextjs.org/docs/app/building-your-application/rendering/client-components

1
Finally Understand Server Components In Next.js 11:36

۶ weeks پیش11:36

11:36

Docs: https://nextjs.org/docs/app/building-your-application/rendering/server-components

1
Understanding Rendering in React & Next.js (The Full Picture) 9:38

۶ weeks پیش9:38

9:38

Docs: https://nextjs.org/docs/app/building-your-application/rendering

1
Optimize Your Code In Next.js With Server Actions 6:29

۷ weeks پیش6:29

6:29

Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

1
Stream Your Data To Fix Bad UX In Next.js 15 7:57

۷ weeks پیش7:57

7:57

Learn how to use Suspense and streaming for sequential data fetching in Next.js

1
Developers Really Need To Be Aware Of This 7:32

۸ weeks پیش7:32

7:32

Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#patterns

Code Ryan

1
THIS Is How To Fetch Data In Next.js 7:42

۸ weeks پیش7:42

7:42

Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#reference

Code Ryan

1
Did You Know This About Custom Hooks In React.js? 11:51

۹ weeks پیش11:51

11:51

Docs: https://react.dev/learn/reusing-logic-with-custom-hooks#recap

Code Ryan

1
Your Complete Guide To Middleware In Next.js 15 10:47

۹ weeks پیش10:47

10:47

Middleware Docs: https://nextjs.org/docs/app/building-your-application/routing/middleware

Code Ryan

1
Prevent This Race Condition In React.js 8:36

10 weeks پیش8:36

8:36

Docs: https://react.dev/learn/you-might-not-need-an-effect#subscribing-to-an-external-store

Code Ryan

1
This Is A Core Concept To Understand About React.js 5:43

11 weeks پیش5:43

5:43

Docs: https://react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes

Code Ryan

1
Your Guide To Parallel Routes In Next.js 15 10:24

11 weeks پیش10:24

10:24

Parallel Routes Docs: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#loading-and-error-ui

Code Ryan

1
How To Stop Running Code Twice In React.js 4:26

12 weeks پیش4:26

4:26

Today I cover an issue you might run into with running code multiple times in React -- especially when running initialization code -- and how React thinks you should solve it Docs: https://react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers

Code Ryan

1
Did You Know This Advanced Routing Technique In Next.js? 7:31

12 weeks پیش7:31

7:31

Docs: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params

Code Ryan

1
Are You Messing This Up In React.js? 5:07

13 weeks پیش5:07

5:07

Docs: https://react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers

Code Ryan

1
Pros Know How To Do This In Next.js 15 6:39

13 weeks پیش6:39

6:39

Docs: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params

Code Ryan

1
Even Pros Make This React.js Mistake 6:27

14 weeks پیش6:27

6:27

Docs: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes

Code Ryan

1
Pro Next.js Developers Know How To Do This 6:17

14 weeks پیش6:17

6:17

Route Groups Code: https://nextjs.org/docs/app/building-your-application/routing/route-groups

Code Ryan

1
This Can Be A Problem In React.js.. 4:46

15 weeks پیش4:46

4:46

Docs: https://react.dev/learn/you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes

Code Ryan

1
A Core Next.js Fundamental You Need To Know About 2:58

15 weeks پیش2:58

2:58

Docs: https://nextjs.org/docs/app/building-your-application/routing/redirecting#nextresponseredirect-in-middleware

Code Ryan

1
Senior Developers Don't Make This Mistake 4:08

16 weeks پیش4:08

4:08

Docs: https://react.dev/learn/you-might-not-need-an-effect#how-to-remove-unnecessary-effects

Code Ryan

1
This Is A Beginner Mistake You Should Avoid (Client-side Routing) 6:31

16 weeks پیش6:31

6:31

Docs: https://nextjs.org/docs/app/api-reference/functions/use-router#disabling-scroll-to-top

Code Ryan

1
2 Mistakes Pro React Developers Don't Make 9:04

17 weeks پیش9:04

9:04

Docs: https://react.dev/learn/you-might-not-need-an-effect#how-to-remove-unnecessary-effects

Code Ryan

1
Did You Know How To Do This In Next.js 15? 4:08

17 weeks پیش4:08

4:08

Learn how to use the redirect and permanenetRedirect functions in Next.js -- https://nextjs.org/docs/app/building-your-application/routing/redirecting#redirect-function

Code Ryan

1
How To Actually Use The useEffect Hook In Modern React.js 12:48

18 weeks پیش12:48

12:48

Docs: https://react.dev/learn/synchronizing-with-effects

Code Ryan

1
Unlock PRO UX with Streaming Web Components in Next.js 6:56

18 weeks پیش6:56

6:56

Docs: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense

Code Ryan

1
3 Key Concepts Professional React Developers Master 8:58

19 weeks پیش8:58

8:58

Docs: https://react.dev/learn/synchronizing-with-effects

Code Ryan

1
The Right Way To Handle Instant Loading States In Next.js 15 4:39

19 weeks پیش4:39

4:39

Docs: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

Code Ryan

1
Correctly Using Refs With DOM Elements In React.js 7:09

20 weeks پیش7:09

7:09

https://react.dev/learn/manipulating-the-dom-with-refs#best-practices-for-dom-manipulation-with-refs

Code Ryan

1
Next.js 15 Error Handling Mastery 8:31

20 weeks پیش8:31

8:31

Docs: https://nextjs.org/docs/app/building-your-application/routing/error-handling#uncaught-exceptions

Code Ryan

1
What Are Refs In React.js, Really? Why? 10:29

21 weeks پیش10:29

10:29

https://react.dev/learn/referencing-values-with-refs#recap

Code Ryan

1
PRO Next.js 15 Error Handling - Expected Errors 7:09

21 weeks پیش7:09

7:09

Docs: https://nextjs.org/docs/app/building-your-application/routing/error-handling

Code Ryan

1
Optimize Client Side Navigation In Next.js 15 9:05

22 weeks پیش9:05

9:05

Docs: https://nextjs.org/docs/app/api-reference/functions/use-router

Code Ryan

1
Actually Understanding Context In React.js 18:04

23 weeks پیش18:04

18:04

Docs: https://react.dev/learn/passing-data-deeply-with-context Starter Project: https://github.com/coderyansolomon/react-context

Code Ryan

1
The Recommended Way To Link In Next.js 15 10:10

23 weeks پیش10:10

10:10

Docs: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating Link API - https://nextjs.org/docs/app/api-reference/components/link

Code Ryan

1
Avoid This Problem In React.js - Prop Drilling 6:12

24 weeks پیش6:12

6:12

Docs: https://react.dev/learn/passing-data-deeply-with-context

Code Ryan

1
Are Templates Better Than Layouts In Next.js? 6:20

24 weeks پیش6:20

6:20

Docs: https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#templates

Code Ryan

1
The Only useReducer Video You Need 24:21

25 weeks پیش24:21

24:21

Docs: https://react.dev/learn/extracting-state-logic-into-a-reducer#comparing-usestate-and-usereducer

Code Ryan

1
How To Use Layouts Correctly In Next.js 15 12:30

25 weeks پیش12:30

12:30

Docs: https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates

Code Ryan

1
Master React State By Solving This Problem 5:26

26 weeks پیش5:26

5:26

Today, I discuss the problem of state not being reset when rendering the same component in the same position within the React tree. Read more about this here: https://react.dev/learn/preserving-and-resetting-state#resetting-state-at-the-same-position

Code Ryan

1
How Pages Really Work In Next.js 15 6:52

26 weeks پیش6:52

6:52

Today, I give a brief overview of how pages work in Next.js 15 and a few important things to know regarding pages. Learn more from the Next.js docs here: https://nextjs.org/docs/app/building-your-application/routing/pages

Code Ryan

1
The Wrong Way To Manage State In React.js 5:30

27 weeks پیش5:30

5:30

Today, I cover having a single source of truth in your React application's state. Docs: https://react.dev/learn/sharing-state-between-components#a-single-source-of-truth-for-each-state

Code Ryan

1
A Next.js Fundamental You Need To Master 13:18

27 weeks پیش13:18

13:18

Learn how to define routes in Next.js 15. Docs: https://nextjs.org/docs/app/building-your-application/routing/defining-routes

Code Ryan

1
This Is A Common Misconception In React.js 9:19

28 weeks پیش9:19

9:19

Docs: https://react.dev/learn/preserving-and-resetting-state#

Code Ryan

1
This Is A Breaking Change For Next.js 15 4:06

28 weeks پیش4:06

4:06

Today, I cover the change from sync to async apis in Next.js 15. Docs: https://nextjs.org/docs/app/building-your-application/upgrading/version-15

Code Ryan

1
A Fundamental React.js Concept - Lifting State 9:33

29 weeks پیش9:33

9:33

Today, I discuss what it means to lift state in React.js and show you an example of how this might be done.

Code Ryan

1
This Is How To Structure State In React.js 11:19

29 weeks پیش11:19

11:19

Today, I cover 5 principles of structuring state in your React applications. Docs: https://react.dev/learn/choosing-the-state-structure#

Code Ryan

1
The Top 3 Next.js 15 Project Organization Strategies 9:07

30 weeks پیش9:07

9:07

Today, I discuss a few solid options for organizing your Next.js projects. Docs: https://nextjs.org/docs/canary/app/building-your-application/routing/colocation#project-organization-strategies

Code Ryan

1
NEW Next.js 15 Feature! Enhanced Forms 7:51

30 weeks پیش7:51

7:51

Today, I show you a cool new feature of Next.js 15 forms: Client Side Navigation

Code Ryan

1
The Modern Guide To Using State In React.js 17:22

31 weeks پیش17:22

17:22

I show you a step by step process for how to think about using state in React.js

Code Ryan

1
I Really Didn't Understand This.. 11:27

31 weeks پیش11:27

11:27

Today, I discuss declarative vs imperative programming in the context of React.js and why it matters.

Code Ryan

1
A Developer Lesson Learned The Hard Way 5:14

32 weeks پیش5:14

5:14

As a web developer, it can be easy to just push a PR without considering how you can make things more maintainable and extendable in the long run.

Code Ryan

1
This Is A Bad Idea In React.js 12:27

32 weeks پیش12:27

12:27

Today, I show some examples of mistakes you can make (bad ideas) when working with arrays in React.js state

Code Ryan

1
This Is A New Helpful Feature In Next.js 15 6:13

33 weeks پیش6:13

6:13

Today, I cover what the status indicator means in your Next.js application as well as giving you a refresher on static vs dynamic rendering. Docs: https://nextjs.org/docs/app/api-reference/next-config-js/devIndicators#appisrstatus-static-indicator

Code Ryan

1
Doing This Is A Bad Idea In Your React Apps 11:55

33 weeks پیش11:55

11:55

Mutating state isn't a great idea in your React apps. But how should you update your objects and arrays? Doing full replacements or creating copies. I show you how in this video.

Code Ryan

1
Do You Need A Degree For Software Engineering? 8:55

34 weeks پیش8:55

8:55

I discuss my experience with having a college degree for software engineering and if I think it's needed or not.

Code Ryan

1
Avoid This Next.js Anti-Pattern 7:23

34 weeks پیش7:23

7:23

A common anti-pattern or mistake that's easy to make in your web apps is creating waterfalls with your network requests.

Code Ryan

1
React State Updates Explained: Why Is Your State Wrong? 12:58

35 weeks پیش12:58

12:58

What does it mean for React to "batch" state updates? Why does it matter?

Code Ryan

1
Master 3 Essential Next.js Concepts in 3(ish) Minutes! 4:26

35 weeks پیش4:26

4:26

Today, you'll gain a high level understanding of 3 core Next.js concepts in just a few minutes. I cover file based routing, server/client components, and server actions.

Code Ryan

1
A Commonly Misunderstood React Concept 8:20

36 weeks پیش8:20

8:20

Today, I do my best to clearly explain how snapshots work in React and why they're important to understand.

Code Ryan

1
Most React Developers Don't Understand This 11:04

36 weeks پیش11:04

11:04

Today, I'm going to fully explain the rendering, re-rendering, and committing phases in React.js

Code Ryan

1
This Is A Problem In Next.js 5:10

37 weeks پیش5:10

5:10

Today, I'm discussing Next.js client and server components, and how to solve a common issue when using the two together.

Code Ryan

1
The Next.js Mistake That Breaks Your Data 5:43

37 weeks پیش5:43

5:43

https://nextjs.org/docs/app/api-reference/functions/revalidatePath

Code Ryan

1
React State: The Key to Dynamic UIs Explained! 26:51

38 weeks پیش26:51

26:51

Code: https://github.com/coderyansolomon/react-state In this video, we'll explore why React's useState hook is essential for building interactive user interfaces. Through a simple counter example, you'll see how relying on plain JavaScript variables fails to trigger UI updates when data changes. By the end, you'll understand how state management ensures your components stay in sync with dynamic data.…

Code Ryan

1
Master React in Minutes: Essential Event Handling Techniques 20:52

38 weeks پیش20:52

20:52

Learn how to handle events in React.js with this step-by-step tutorial, perfect for beginners. We'll cover essential techniques for managing button clicks, input changes, and form submissions in a simple, easy-to-follow format. By the end, you'll be equipped to confidently implement event handling in your React projects! Code: https://github.com/coderyansolomon/react-events…

Code Ryan

1
EASY UX Upgrade: Snap Scrolling with Next.js & Tailwind 19:50

39 weeks پیش19:50

19:50

Learn how to build a cool scroll-snap feature in Next.js using Tailwind CSS! Final Code: https://github.com/coderyansolomon/scrollsnap

Code Ryan

1
Avoid This Common React Mistake Newbies Make 7:34

39 weeks پیش7:34

7:34

Topics Covered: What is an event? How are event handlers typically passed? Calling a function rather than passing a reference to a function But what if you need to pass arguments? When possible, I like creating functions outside of the component so I can test them a bit easier via exports

Code Ryan

1
The Surprising Key to Overcoming Coding Blocks 4:42

40 weeks پیش4:42

4:42

Today, I discuss a helpful stragety that has helped improve my productivity as a software engineer while saving me some mental fatigue as well.

Code Ryan

1
THIS Is The HARDEST Part Of Software Engineering 6:38

40 weeks پیش6:38

6:38

Today, I discuss what I think is one of the hardest parts about software engineering.

Code Ryan

1
React State Explained: The Key to Dynamic Apps (Beginner's Guide) 4:56

41 weeks پیش4:56

4:56

Today, I cover exactly what state is in React.js.

Code Ryan

1
5 Things I Love About Being a Software Engineer (And You Will Too) 6:20

41 weeks پیش6:20

6:20

In today's video, I cover 5 things I really enjoy about being a software engineer. And for the record, I don't actually think AI will be taking all of our jobs.. yet.

Code Ryan

1
Unlock React's Power: Understand Your UI as a Tree Structure 10:11

42 weeks پیش10:11

10:11

Today, I'm going to do my best to discuss thinking about React as a tree like structure and why this is important.

Code Ryan

1
5 Things I HATE About Being A Software Engineer 8:10

42 weeks پیش8:10

8:10

Today, I'm going to cover 5 downside (plus one bonus) of working full time as a professional software engineer.

Code Ryan

1
What is React.js, really? Complete Guide For Beginners and Pros 15:40

43 weeks پیش15:40

15:40

Today, learn what React.js is, some core concepts of React js, job outlook for React.js, and a complete overview of React.

Code Ryan

1
Master React.js Lists: Easy Rendering Techniques Explained! 13:13

44 weeks پیش13:13

13:13

In this video, learn how to correctly render lists in your React.js application! Code: https://github.com/coderyansolomon/react-lists React.js Docs: https://react.dev/learn/rendering-lists

Code Ryan

1
Next.js Pitfalls: Avoiding Unsupported Client and Server Patterns 8:06

44 weeks پیش8:06

8:06

Learn about supported and unsupported patterns when it comes to client and server components in Next.js! Code: https://github.com/coderyansolomon/server-client-render Docs: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components…

Code Ryan

1
How to Use Conditional Rendering in React.js Like a Pro 14:26

45 weeks پیش14:26

14:26

Code: https://github.com/coderyansolomon/conditional-render Docs: https://react.dev/learn/conditional-rendering Learn exactly how to conditional render content in React.js!

Code Ryan

1
Boost Your Next.js Skills: Learn useParams for Dynamic Routes 10:14

45 weeks پیش10:14

10:14

This video covers how the useParams hook works in Next.js. It also covers how params work generally in Next.js and why they're useful. Code: https://github.com/coderyansolomon/useparams/tree/main/app

Code Ryan

1
Master React Props: The Ultimate Guide In 2024 25:27

46 weeks پیش25:27

25:27

In today's video, you'll learn exactly how props work in react.js. You'll learn what they are, how they work, why props exist, how to destructure them, if you should mutate them, how props.children work, what props forwarding is, and much more!

Code Ryan

1
How React.js Components Work: A Step-by-Step Guide 24:29

46 weeks پیش24:29

24:29

Code: https://github.com/coderyansolomon/components In todays video, I cover exactly how components work In React.js. You'll learn what components are, how they work, how to create them, how to render them, and much more!

Code Ryan

1
Next.js Redirects 101: Simplify Your Routing Like a Pro! 13:28

47 weeks پیش13:28

13:28

Code: https://github.com/coderyansolomon/redirects-nextjs Docs: https://nextjs.org/docs/app/building-your-application/routing/redirecting Learn how to redirect in Next.js server components, client components, server actions, route handlers, and middleware

به Player FM خوش آمدید!

Player FM در سراسر وب را برای یافتن پادکست های با کیفیت اسکن می کند تا همین الان لذت ببرید. این بهترین برنامه ی پادکست است که در اندروید، آیفون و وب کار می کند. ثبت نام کنید تا اشتراک های شما در بین دستگاه های مختلف همگام سازی شود.