Media is too big
VIEW IN TELEGRAM
13. Dynamic Content Fetching
Scott demonstrates how to fetch data from a CMS by making an API call to retrieve content based on a dynamic route parameter (slug), and then render the fetched data on the page. He also introduces the contentful-rich-text-renderer component and shows how to use it to render JSON content from the CMS.
#lesson
Scott demonstrates how to fetch data from a CMS by making an API call to retrieve content based on a dynamic route parameter (slug), and then render the fetched data on the page. He also introduces the contentful-rich-text-renderer component and shows how to use it to render JSON content from the CMS.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Pre-rendering Dynamic Routes
Scott explains how to pre-render dynamic pages in Next.js using the `generateStaticParams` function. He demonstrates how to create a new query to fetch the slugs for the dynamic pages and then use that data to generate an array of objects with the slug property.
#lesson
Scott explains how to pre-render dynamic pages in Next.js using the `generateStaticParams` function. He demonstrates how to create a new query to fetch the slugs for the dynamic pages and then use that data to generate an array of objects with the slug property.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Content Previews in Contentful
Scott introduces the concept of previews in a headless CMS and explains how they are implemented in Contentful. Previews allow users to see draft content on the website without publishing it.
#lesson
Scott introduces the concept of previews in a headless CMS and explains how they are implemented in Contentful. Previews allow users to see draft content on the website without publishing it.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Adding Content Preview Route
Scott guides students through the process of enabling draft mode in a Next.js application connected to Contentful. He explains how to create an API route, set up a secret for authentication, and handle the logic for redirecting to the previewed content. He also demonstrates how to pass the draft mode parameter to GraphQL queries to fetch draft content.
#lesson
Scott guides students through the process of enabling draft mode in a Next.js application connected to Contentful. He explains how to create an API route, set up a secret for authentication, and handle the logic for redirecting to the previewed content. He also demonstrates how to pass the draft mode parameter to GraphQL queries to fetch draft content.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Previewing Content Q&A
Scott addresses questions about multi-tenancy and how CMS platforms handle simultaneous editing of the same content. He also discusses the integration of CMS platforms with Vercel's draft capabilities, implementing A-B testing with a CMS, and incremental server rendering.
#lesson
Scott addresses questions about multi-tenancy and how CMS platforms handle simultaneous editing of the same content. He also discusses the integration of CMS platforms with Vercel's draft capabilities, implementing A-B testing with a CMS, and incremental server rendering.
#lesson
Media is too big
VIEW IN TELEGRAM
18. Caching
Scott explains how caching works in Next.js and demonstrates two ways to break the cache. The first method involves setting a revalidation interval using the `revalidate` property in the `fetch` function. The second method involves creating a route in the API folder and setting up a webhook on Contentful to trigger a revalidation of specific cache tags. This allows for the display of new content without rebuilding the entire site.
#lesson
Scott explains how caching works in Next.js and demonstrates two ways to break the cache. The first method involves setting a revalidation interval using the `revalidate` property in the `fetch` function. The second method involves creating a route in the API folder and setting up a webhook on Contentful to trigger a revalidation of specific cache tags. This allows for the display of new content without rebuilding the entire site.
#lesson
Media is too big
VIEW IN TELEGRAM
19. Resources & Next Steps
Scott discusses various CMS options such as Builder, Prismic, Storyblok, and Framer, highlighting their unique features and use cases. He also addresses common questions about using headless CMSs outside of static sites and explores the potential for using CMSs in mobile apps and other scenarios.
#lesson
Scott discusses various CMS options such as Builder, Prismic, Storyblok, and Framer, highlighting their unique features and use cases. He also addresses common questions about using headless CMSs outside of static sites and explores the potential for using CMSs in mobile apps and other scenarios.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Wrapping Up
Scott wraps up the course by providing some tips and best practices for configuring CMSs, such as not letting content teams mess with the models, observing and improving the schema based on the content team's needs, and starting slow with implementing changes.
#lesson
Scott wraps up the course by providing some tips and best practices for configuring CMSs, such as not letting content teams mess with the models, observing and improving the schema based on the content team's needs, and starting slow with implementing changes.
#lesson
Title: Intermediate Next.js
Description: Dive deeper into Next.js concepts including server actions, route protection, caching strategies, and advanced data fetching. Build a full-stack app with React 18+ features and optimized performance.
Link: https://frontendmasters.com/courses/intermediate-next-js/
Time: 3 hours, 31 minutes
Lessons: 25 / 25
Tags: #course #frontendmasters #720p
Description: Dive deeper into Next.js concepts including server actions, route protection, caching strategies, and advanced data fetching. Build a full-stack app with React 18+ features and optimized performance.
Link: https://frontendmasters.com/courses/intermediate-next-js/
Time: 3 hours, 31 minutes
Lessons: 25 / 25
Tags: #course #frontendmasters #720p
Frontendmasters
Advanced Next.js: Server Actions, Routing & Data Fetching | React 18+
Dive deeper into Next.js concepts including server actions, route protection, caching strategies, and advanced data fetching. Build a full-stack app with React 18+ features and optimized performance.
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