This media is not supported in your browser
VIEW IN TELEGRAM
1. Introduction
Scott Moss begins the Intermediate Next.js course with an overview of the topics covered and a brief tour of the course repo and application that will be built. The code for the application can be found on the main branch in the repo or throughout the course notes.
- https://github.com/Hendrixer/intermediate-nextjs
- https://clumsy-humor-894.notion.site/Intermediate-Next-js-0f91d69bdb5046c3920caf325222eb97
#lesson
Scott Moss begins the Intermediate Next.js course with an overview of the topics covered and a brief tour of the course repo and application that will be built. The code for the application can be found on the main branch in the repo or throughout the course notes.
- https://github.com/Hendrixer/intermediate-nextjs
- https://clumsy-humor-894.notion.site/Intermediate-Next-js-0f91d69bdb5046c3920caf325222eb97
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
2. Project & Database Setup
Scott walks through the instructions for cloning the repo and installing the project dependencies. The application's database will be SQLite hosted on Turso. Once an account and database are created in Turso, the TURSO CONNECTION URL and TURSO AUTH TOKEN environment variables can be added to the project.
#lesson
Scott walks through the instructions for cloning the repo and installing the project dependencies. The application's database will be SQLite hosted on Turso. Once an account and database are created in Turso, the TURSO CONNECTION URL and TURSO AUTH TOKEN environment variables can be added to the project.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
3. React Standards in Next.js
Scott reviews some recent features added to React that are often thought to be developed by the Next.js team. These features are available in React 18+ and improve the developer experience and application performance.
- https://clumsy-humor-894.notion.site/1-React-Standards-a0f820253e4c469aaf2b4950947650fd
#lesson
Scott reviews some recent features added to React that are often thought to be developed by the Next.js team. These features are available in React 18+ and improve the developer experience and application performance.
- https://clumsy-humor-894.notion.site/1-React-Standards-a0f820253e4c469aaf2b4950947650fd
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
4. Server & Form Actions Overview
Scott talks through some key concepts for working with forms and form data in React and Next.js. Server Actions simplify form data handling by exposing a FormData object with the data sent to the server from the form.
- https://clumsy-humor-894.notion.site/2-Form-Actions-6bea6558a8de4d06885dab04396ba278
#lesson
Scott talks through some key concepts for working with forms and form data in React and Next.js. Server Actions simplify form data handling by exposing a FormData object with the data sent to the server from the form.
- https://clumsy-humor-894.notion.site/2-Form-Actions-6bea6558a8de4d06885dab04396ba278
#lesson
Media is too big
VIEW IN TELEGRAM
5. Auth Actions
Scott creates server actions to handle authentication from the sign-up and sign-in forms. The actions are created in an actions directory outside the app directory. The registerUser action is then imported into the SignupForm component.
- https://clumsy-humor-894.notion.site/2a-Implementation-67360f7c86a340b0a40eba5d94ddd571
#lesson
Scott creates server actions to handle authentication from the sign-up and sign-in forms. The actions are created in an actions directory outside the app directory. The registerUser action is then imported into the SignupForm component.
- https://clumsy-humor-894.notion.site/2a-Implementation-67360f7c86a340b0a40eba5d94ddd571
#lesson
Media is too big
VIEW IN TELEGRAM
6. Submit Button
Scott creates a SubmitButton component to submit the form and trigger the registerUser server action. Once a user is registered, the record in the database can be inspected by launching Drizzle Studio with the "npm run db:studio" command.
#lesson
Scott creates a SubmitButton component to submit the form and trigger the registerUser server action. Once a user is registered, the record in the database can be inspected by launching Drizzle Studio with the "npm run db:studio" command.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Sign-In Form
Scott implements the sign-in form by adding the SubmitButton component and triggering the signinUser server action when the form is submitted. An error message for incorrect username and password combinations is also added to the UI. The current code can be found on the "step/1" branch.
#lesson
Scott implements the sign-in form by adding the SubmitButton component and triggering the signinUser server action when the form is submitted. An error message for incorrect username and password combinations is also added to the UI. The current code can be found on the "step/1" branch.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Route Slots
Scott introduces route slots, which are also called parallel routes. They enable simultaneous or conditional rendering of multiple pages or components within the same layout. This is beneficial for sections of an application that require dynamic content changes without navigating away from the page, like social media feeds or analytics dashboards.
- https://clumsy-humor-894.notion.site/3-Route-Slots-901e6035a3a24e94b9ae7173b55fe20f
#lesson
Scott introduces route slots, which are also called parallel routes. They enable simultaneous or conditional rendering of multiple pages or components within the same layout. This is beneficial for sections of an application that require dynamic content changes without navigating away from the page, like social media feeds or analytics dashboards.
- https://clumsy-humor-894.notion.site/3-Route-Slots-901e6035a3a24e94b9ae7173b55fe20f
#lesson
Media is too big
VIEW IN TELEGRAM
9. Dashboard Routes
Scott creates route slots for the Events and RSVPs pages. This allows them to be used in the dashboard layout without requiring separate loading or error-handling logic.
- https://clumsy-humor-894.notion.site/3a-Implementation-fa8db31fc16647269348dc09b59ae497
#lesson
Scott creates route slots for the Events and RSVPs pages. This allows them to be used in the dashboard layout without requiring separate loading or error-handling logic.
- https://clumsy-humor-894.notion.site/3a-Implementation-fa8db31fc16647269348dc09b59ae497
#lesson
Media is too big
VIEW IN TELEGRAM
10. Default Routes
Scott adds default routes for each route slot to ensure something is returned if one of the slots is given a sub-route that isn't present in the other route slots.
#lesson
Scott adds default routes for each route slot to ensure something is returned if one of the slots is given a sub-route that isn't present in the other route slots.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Server-Side Data Fetching
Scott introduces server-side data fetching and talks through a few common use cases. A utility function is created to get the current user, and a few other utility files are explained.
- https://clumsy-humor-894.notion.site/4-Server-side-data-fetching-3ed60cfb519d437ba293d4d0a6766777
#lesson
Scott introduces server-side data fetching and talks through a few common use cases. A utility function is created to get the current user, and a few other utility files are explained.
- https://clumsy-humor-894.notion.site/4-Server-side-data-fetching-3ed60cfb519d437ba293d4d0a6766777
#lesson
❤1
Media is too big
VIEW IN TELEGRAM
12. Displaying Attendee Count
Scott codes a utility function for getting the attendee count. It uses the Drizzle ORM to pull the data from the database and returns the total count. The count is then displayed on the dashboard home page.
#lesson
Scott codes a utility function for getting the attendee count. It uses the Drizzle ORM to pull the data from the database and returns the total count. The count is then displayed on the dashboard home page.
#lesson
Media is too big
VIEW IN TELEGRAM
13. Fetching Events & RSVPs
Scott fetches server data for the events and RSVPs. Utility functions are created for each to return the data from the database. The events and RSVPs are then displayed on their respective pages in the dashboard. The current code can be found on the "step/2" branch.
#lesson
Scott fetches server data for the events and RSVPs. Utility functions are created for each to return the data from the database. The events and RSVPs are then displayed on their respective pages in the dashboard. The current code can be found on the "step/2" branch.
#lesson
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
14. Per-Request Caching
Scott demonstrates per-request caching, which helps eliminate repeated database or server-side calls on a single request. To highlight this, the getCurrentUser utility function, which is called three times from the dashboard page, is wrapped in React's cache function. This reduces the number of invocations to one.
#lesson
Scott demonstrates per-request caching, which helps eliminate repeated database or server-side calls on a single request. To highlight this, the getCurrentUser utility function, which is called three times from the dashboard page, is wrapped in React's cache function. This reduces the number of invocations to one.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Cache Persistence & Revalidation Tags
Scott implements persistent caching for the RSVPs, events, and attendees. A third-party module that leverages React's caching along with memoization is imported and used as a wrapper just like the cache function. Revalidation tags are added so the cache can be revalidated at a later time.
#lesson
Scott implements persistent caching for the RSVPs, events, and attendees. A third-party module that leverages React's caching along with memoization is imported and used as a wrapper just like the cache function. Revalidation tags are added so the cache can be revalidated at a later time.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Suspense & Errors
Scott creates loading spinners and handles page-specific errors. A loading spinner or any other UI element can be displayed by adding a loading.tsx file to the route. The same pattern can be used to handle errors with a errors.tsx file. The current code can be found on the "step/3" branch.
- https://clumsy-humor-894.notion.site/5-Suspense-and-Errors-803721679f594cefb241894f85aa0b9a
#lesson
Scott creates loading spinners and handles page-specific errors. A loading spinner or any other UI element can be displayed by adding a loading.tsx file to the route. The same pattern can be used to handle errors with a errors.tsx file. The current code can be found on the "step/3" branch.
- https://clumsy-humor-894.notion.site/5-Suspense-and-Errors-803721679f594cefb241894f85aa0b9a
#lesson
Media is too big
VIEW IN TELEGRAM
17. Active Routes
Scott enhances the application's UX by implementing active routes. This will highlight the current navigation item using the usePathname hook and applying active classes.
- https://clumsy-humor-894.notion.site/6-Active-route-c093edcf677d448586be1710edeb5a5f
#lesson
Scott enhances the application's UX by implementing active routes. This will highlight the current navigation item using the usePathname hook and applying active classes.
- https://clumsy-humor-894.notion.site/6-Active-route-c093edcf677d448586be1710edeb5a5f
#lesson
Media is too big
VIEW IN TELEGRAM
18. Route Protection
Scott explains how middleware can be used to add route protection to the application. Middleware functions run on the edge, executing before the server processes cached content or matches routes. This allows the user to be redirected to the sign-in page if they aren't authenticated. Several other examples of middleware are shared, including conditional routing, managing cookies and headers, and CORS.
- https://clumsy-humor-894.notion.site/7-Protect-Routes-with-Middleware-2824779bed824fea8fb96a665fca2253
#lesson
Scott explains how middleware can be used to add route protection to the application. Middleware functions run on the edge, executing before the server processes cached content or matches routes. This allows the user to be redirected to the sign-in page if they aren't authenticated. Several other examples of middleware are shared, including conditional routing, managing cookies and headers, and CORS.
- https://clumsy-humor-894.notion.site/7-Protect-Routes-with-Middleware-2824779bed824fea8fb96a665fca2253
#lesson
Media is too big
VIEW IN TELEGRAM
19. Protecting Routes with Middleware
Scott adds a middleware function to the application to protect the dashboard and root routes. For the dashboard route, the middleware will ensure the user is authenticated; otherwise, it redirects them to the sign-in page. Since there is no page for the root route, the middleware redirects to the dashboard. The current code can be found on the "step/4" branch
- https://clumsy-humor-894.notion.site/7a-Implementation-fa49f6ecd0574c6197796dfec3cbeb45
#lesson
Scott adds a middleware function to the application to protect the dashboard and root routes. For the dashboard route, the middleware will ensure the user is authenticated; otherwise, it redirects them to the sign-in page. Since there is no page for the root route, the middleware redirects to the dashboard. The current code can be found on the "step/4" branch
- https://clumsy-humor-894.notion.site/7a-Implementation-fa49f6ecd0574c6197796dfec3cbeb45
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
20. Non-Form Server Actions
Scott discusses use cases for server actions that don't involve forms. Server actions can be integrated into other parts of an application, such as event handlers and React hooks. This allows for dynamic server-side operations responding to user interactions or lifecycle events.
- https://clumsy-humor-894.notion.site/8-Non-form-Server-Actions-be544d2769424bed85fc0f190f16cf38
#lesson
Scott discusses use cases for server actions that don't involve forms. Server actions can be integrated into other parts of an application, such as event handlers and React hooks. This allows for dynamic server-side operations responding to user interactions or lifecycle events.
- https://clumsy-humor-894.notion.site/8-Non-form-Server-Actions-be544d2769424bed85fc0f190f16cf38
#lesson
Media is too big
VIEW IN TELEGRAM
21. useTransition & Non-Blocking Updates
Scott codes a server action to create a new event. However, since the data is cached, a hard reload is required to view the newly created event. To fix this, the revalidateTag method is called to clear the events cache and immediately display the event. The current code can be found on the "step/5" branch
- https://clumsy-humor-894.notion.site/8a-Implementation-a415196d4d51459bb0185b769012b585
#lesson
Scott codes a server action to create a new event. However, since the data is cached, a hard reload is required to view the newly created event. To fix this, the revalidateTag method is called to clear the events cache and immediately display the event. The current code can be found on the "step/5" branch
- https://clumsy-humor-894.notion.site/8a-Implementation-a415196d4d51459bb0185b769012b585
#lesson