Player FM - Internet Radio Done Right
Checked 3d ago
Added two years ago
Content provided by Ryan Solomon. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Ryan Solomon or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://ppacc.player.fm/legal.
Player FM - Podcast App
Go offline with the Player FM app!
Go offline with the Player FM app!
Podcasts Worth a Listen
SPONSORED
L
Lost Cultures: Living Legacies


On the Season 2 debut of Lost Cultures: Living Legacies , we travel to Bermuda, an Atlantic island whose history spans centuries and continents. Once uninhabited, Bermuda became a vital stop in transatlantic trade, a maritime stronghold, and a cultural crossroads shaped by African, European, Caribbean, and Native American influences. Guests Dr. Kristy Warren and Dr. Edward Harris trace its transformation from an uninhabited island to a strategic outpost shaped by shipwrecks, colonization, the transatlantic slave trade, and the rise and fall of empires. Plus, former Director of Tourism Gary Phillips shares the story of the Gombey tradition, a vibrant performance art rooted in resistance, migration, and cultural fusion. Together, they reveal how Bermuda’s layered past continues to shape its people, culture, and identity today. You can also find us online at travelandleisure.com/lostcultures Learn more about your ad choices. Visit podcastchoices.com/adchoices…
Understanding Authorization And Authentication In Next.js
Manage episode 410627307 series 3493400
Content provided by Ryan Solomon. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Ryan Solomon or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://ppacc.player.fm/legal.
Next.js Article: https://nextjs.org/docs/app/building-your-application/authentication#authorizationrevoked
In this video, I cover the difference between authentication and authorization in web development. I also discuss ways to implement both in Next.js
296 episodes
Manage episode 410627307 series 3493400
Content provided by Ryan Solomon. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Ryan Solomon or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://ppacc.player.fm/legal.
Next.js Article: https://nextjs.org/docs/app/building-your-application/authentication#authorizationrevoked
In this video, I cover the difference between authentication and authorization in web development. I also discuss ways to implement both in Next.js
296 episodes
All episodes
×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.
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
7:32
Play Later
Play Later
Lists
Like
Liked7: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
8:48
Play Later
Play Later
Lists
Like
Liked8:48
Learn the recommended way to fetch data in Next.js as well as some patterns to know about client and server components.
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.
docs: https://nextjs.org/docs/app/building-your-application/rendering/client-components

1 Finally Understand Server Components In Next.js 11:36
11:36
Play Later
Play Later
Lists
Like
Liked11: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
9:38
Play Later
Play Later
Lists
Like
Liked9:38
Docs: https://nextjs.org/docs/app/building-your-application/rendering

1 Optimize Your Code In Next.js With Server Actions 6:29
6:29
Play Later
Play Later
Lists
Like
Liked6:29
Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
Learn how to use Suspense and streaming for sequential data fetching in Next.js
Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#patterns
Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#reference

1 Did You Know This About Custom Hooks In React.js? 11:51
11:51
Play Later
Play Later
Lists
Like
Liked11:51
Docs: https://react.dev/learn/reusing-logic-with-custom-hooks#recap

1 Your Complete Guide To Middleware In Next.js 15 10:47
10:47
Play Later
Play Later
Lists
Like
Liked10:47
Middleware Docs: https://nextjs.org/docs/app/building-your-application/routing/middleware
Docs: https://react.dev/learn/you-might-not-need-an-effect#subscribing-to-an-external-store
C
Code Ryan

1 This Is A Core Concept To Understand About React.js 5:43
5:43
Play Later
Play Later
Lists
Like
Liked5:43
Docs: https://react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes
C
Code Ryan

1 Your Guide To Parallel Routes In Next.js 15 10:24
10:24
Play Later
Play Later
Lists
Like
Liked10:24
Parallel Routes Docs: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#loading-and-error-ui
C
Code Ryan

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
C
Code Ryan

1 Did You Know This Advanced Routing Technique In Next.js? 7:31
7:31
Play Later
Play Later
Lists
Like
Liked7:31
Docs: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params
C
Code Ryan

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

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

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

Route Groups Code: https://nextjs.org/docs/app/building-your-application/routing/route-groups
Docs: https://react.dev/learn/you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes
C
Code Ryan

1 A Core Next.js Fundamental You Need To Know About 2:58
2:58
Play Later
Play Later
Lists
Like
Liked2:58
Docs: https://nextjs.org/docs/app/building-your-application/routing/redirecting#nextresponseredirect-in-middleware
C
Code Ryan

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

1 This Is A Beginner Mistake You Should Avoid (Client-side Routing) 6:31
6:31
Play Later
Play Later
Lists
Like
Liked6:31
Docs: https://nextjs.org/docs/app/api-reference/functions/use-router#disabling-scroll-to-top
C
Code Ryan

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

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

1 How To Actually Use The useEffect Hook In Modern React.js 12:48
12:48
Play Later
Play Later
Lists
Like
Liked12:48
Docs: https://react.dev/learn/synchronizing-with-effects
C
Code Ryan

1 Unlock PRO UX with Streaming Web Components in Next.js 6:56
6:56
Play Later
Play Later
Lists
Like
Liked6:56
Docs: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense
C
Code Ryan

1 3 Key Concepts Professional React Developers Master 8:58
8:58
Play Later
Play Later
Lists
Like
Liked8:58
Docs: https://react.dev/learn/synchronizing-with-effects
C
Code Ryan

1 The Right Way To Handle Instant Loading States In Next.js 15 4:39
4:39
Play Later
Play Later
Lists
Like
Liked4:39
Docs: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
C
Code Ryan

1 Correctly Using Refs With DOM Elements In React.js 7:09
7:09
Play Later
Play Later
Lists
Like
Liked7:09
https://react.dev/learn/manipulating-the-dom-with-refs#best-practices-for-dom-manipulation-with-refs
Docs: https://nextjs.org/docs/app/building-your-application/routing/error-handling#uncaught-exceptions
C
Code Ryan

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

1 PRO Next.js 15 Error Handling - Expected Errors 7:09
7:09
Play Later
Play Later
Lists
Like
Liked7:09
Docs: https://nextjs.org/docs/app/building-your-application/routing/error-handling
C
Code Ryan

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

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

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

1 Avoid This Problem In React.js - Prop Drilling 6:12
6:12
Play Later
Play Later
Lists
Like
Liked6:12
Docs: https://react.dev/learn/passing-data-deeply-with-context
C
Code Ryan

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

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

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

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
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
C
Code Ryan

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
C
Code Ryan

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

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

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
C
Code Ryan

1 A Fundamental React.js Concept - Lifting State 9:33
9:33
Play Later
Play Later
Lists
Like
Liked9:33
Today, I discuss what it means to lift state in React.js and show you an example of how this might be done.
C
Code Ryan

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

1 The Top 3 Next.js 15 Project Organization Strategies 9:07
9:07
Play Later
Play Later
Lists
Like
Liked9: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
C
Code Ryan

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

1 The Modern Guide To Using State In React.js 17:22
17:22
Play Later
Play Later
Lists
Like
Liked17:22
I show you a step by step process for how to think about using state in React.js
C
Code Ryan

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

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.
Today, I show some examples of mistakes you can make (bad ideas) when working with arrays in React.js state
C
Code Ryan

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
C
Code Ryan

1 Doing This Is A Bad Idea In Your React Apps 11:55
11:55
Play Later
Play Later
Lists
Like
Liked11: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.
C
Code Ryan

1 Do You Need A Degree For Software Engineering? 8:55
8:55
Play Later
Play Later
Lists
Like
Liked8:55
I discuss my experience with having a college degree for software engineering and if I think it's needed or not.
A common anti-pattern or mistake that's easy to make in your web apps is creating waterfalls with your network requests.
C
Code Ryan

1 React State Updates Explained: Why Is Your State Wrong? 12:58
12:58
Play Later
Play Later
Lists
Like
Liked12:58
What does it mean for React to "batch" state updates? Why does it matter?
C
Code Ryan

1 Master 3 Essential Next.js Concepts in 3(ish) Minutes! 4:26
4:26
Play Later
Play Later
Lists
Like
Liked4: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.
C
Code Ryan

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

1 Most React Developers Don't Understand This 11:04
11:04
Play Later
Play Later
Lists
Like
Liked11:04
Today, I'm going to fully explain the rendering, re-rendering, and committing phases in React.js
Today, I'm discussing Next.js client and server components, and how to solve a common issue when using the two together.
C
Code Ryan

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

1 React State: The Key to Dynamic UIs Explained! 26:51
26:51
Play Later
Play Later
Lists
Like
Liked26: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.…
C
Code Ryan

1 Master React in Minutes: Essential Event Handling Techniques 20:52
20:52
Play Later
Play Later
Lists
Like
Liked20: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…
C
Code Ryan

1 EASY UX Upgrade: Snap Scrolling with Next.js & Tailwind 19:50
19:50
Play Later
Play Later
Lists
Like
Liked19:50
Learn how to build a cool scroll-snap feature in Next.js using Tailwind CSS! Final Code: https://github.com/coderyansolomon/scrollsnap
C
Code Ryan

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
C
Code Ryan

1 The Surprising Key to Overcoming Coding Blocks 4:42
4:42
Play Later
Play Later
Lists
Like
Liked4: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.
C
Code Ryan

1 THIS Is The HARDEST Part Of Software Engineering 6:38
6:38
Play Later
Play Later
Lists
Like
Liked6:38
Today, I discuss what I think is one of the hardest parts about software engineering.
C
Code Ryan

1 React State Explained: The Key to Dynamic Apps (Beginner's Guide) 4:56
4:56
Play Later
Play Later
Lists
Like
Liked4:56
Today, I cover exactly what state is in React.js.
C
Code Ryan

1 5 Things I Love About Being a Software Engineer (And You Will Too) 6:20
6:20
Play Later
Play Later
Lists
Like
Liked6: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.
C
Code Ryan

1 Unlock React's Power: Understand Your UI as a Tree Structure 10:11
10:11
Play Later
Play Later
Lists
Like
Liked10:11
Today, I'm going to do my best to discuss thinking about React as a tree like structure and why this is important.
C
Code Ryan

1 5 Things I HATE About Being A Software Engineer 8:10
8:10
Play Later
Play Later
Lists
Like
Liked8:10
Today, I'm going to cover 5 downside (plus one bonus) of working full time as a professional software engineer.
C
Code Ryan

1 What is React.js, really? Complete Guide For Beginners and Pros 15:40
15:40
Play Later
Play Later
Lists
Like
Liked15:40
Today, learn what React.js is, some core concepts of React js, job outlook for React.js, and a complete overview of React.
C
Code Ryan

1 Master React.js Lists: Easy Rendering Techniques Explained! 13:13
13:13
Play Later
Play Later
Lists
Like
Liked13: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
C
Code Ryan

1 Next.js Pitfalls: Avoiding Unsupported Client and Server Patterns 8:06
8:06
Play Later
Play Later
Lists
Like
Liked8: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…
C
Code Ryan

1 How to Use Conditional Rendering in React.js Like a Pro 14:26
14:26
Play Later
Play Later
Lists
Like
Liked14: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!
C
Code Ryan

1 Boost Your Next.js Skills: Learn useParams for Dynamic Routes 10:14
10:14
Play Later
Play Later
Lists
Like
Liked10: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
C
Code Ryan

1 Master React Props: The Ultimate Guide In 2024 25:27
25:27
Play Later
Play Later
Lists
Like
Liked25: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!
C
Code Ryan

1 How React.js Components Work: A Step-by-Step Guide 24:29
24:29
Play Later
Play Later
Lists
Like
Liked24: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!
C
Code Ryan

1 Next.js Redirects 101: Simplify Your Routing Like a Pro! 13:28
13:28
Play Later
Play Later
Lists
Like
Liked13: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
C
Code Ryan

1 Next.js Streaming: Deliver Better User Experiences 9:54
9:54
Play Later
Play Later
Lists
Like
Liked9:54
Learn how streaming and suspense can help improve your Next.js applications! Code: https://github.com/coderyansolomon/streaming
C
Code Ryan

1 Pro Software Engineers Know These 10 Command Line Tips 13:31
13:31
Play Later
Play Later
Lists
Like
Liked13:31
C
Code Ryan

1 Essential Next.js: Private Routes, Colocation, and Advanced Routing Explained! 15:50
15:50
Play Later
Play Later
Lists
Like
Liked15:50
In this video, you'll learn about creating route, creating private folders, creating route groups, colocation, and more Check out the docs here for more information: https://nextjs.org/docs/app/building-your-application/routing/colocation#private-folders
C
Code Ryan

1 A Crucial Lesson Every Software Engineer Should Know 3:47
3:47
Play Later
Play Later
Lists
Like
Liked3:47
Welcome to Player FM!
Player FM is scanning the web for high-quality podcasts for you to enjoy right now. It's the best podcast app and works on Android, iPhone, and the web. Signup to sync subscriptions across devices.