This media is not supported in your browser
VIEW IN TELEGRAM
4. Setup Contentful
Scott guides students on how to obtain the necessary .env values from Contentful and provides an example file for reference. The instructor also discusses the challenges of data modeling for a headless CMS and emphasizes the importance of considering the content team's needs when designing the data model.
#lesson
Scott guides students on how to obtain the necessary .env values from Contentful and provides an example file for reference. The instructor also discusses the challenges of data modeling for a headless CMS and emphasizes the importance of considering the content team's needs when designing the data model.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Contentful API Setup
Scott identifies the elements on the website that need to be dynamic, such as the hero section with its title, description, and links. He explains the importance of deciding which elements should be editable by non-technical team members and which should be fixed. He also demonstrates how to remove the content layer integration and create a GraphQL content fetcher to retrieve the dynamic content from the CMS.
#lesson
Scott identifies the elements on the website that need to be dynamic, such as the hero section with its title, description, and links. He explains the importance of deciding which elements should be editable by non-technical team members and which should be fixed. He also demonstrates how to remove the content layer integration and create a GraphQL content fetcher to retrieve the dynamic content from the CMS.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Content Model in Contentful
Scott explains how to create a content model in Contentful. He demonstrates the process of creating fields for the hero, such as pre-title, title, subtitle, and call-to-action buttons. He also explains the options and configurations available for each field. The instructor emphasizes the importance of designing a flexible and reusable schema to take advantage of server components in Next.js.
#lesson
Scott explains how to create a content model in Contentful. He demonstrates the process of creating fields for the hero, such as pre-title, title, subtitle, and call-to-action buttons. He also explains the options and configurations available for each field. The instructor emphasizes the importance of designing a flexible and reusable schema to take advantage of server components in Next.js.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Querying Content with GraphQL
Scott demonstrates how to create a new hero content item. He also demonstrates how to use the Apollo Studio Explorer Sandbox to test the GraphQL query that will be used to retrieve the hero content item data.
#lesson
Scott demonstrates how to create a new hero content item. He also demonstrates how to use the Apollo Studio Explorer Sandbox to test the GraphQL query that will be used to retrieve the hero content item data.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Pulling Content into Next.js
Scott demonstrates how to fetch data from a CMS using GraphQL queries. He explains how to type check the returned data and dynamically display the fetched content on a Next.js page. Scott also briefly discusses caching with Next.js and how to break the cache to ensure that updated content is displayed.
#lesson
Scott demonstrates how to fetch data from a CMS using GraphQL queries. He explains how to type check the returned data and dynamically display the fetched content on a Next.js page. Scott also briefly discusses caching with Next.js and how to break the cache to ensure that updated content is displayed.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Content Modeling Images
Scott discusses the process of creating a content model for a website's logo wall. He explains how to analyze the code to determine the necessary fields for the content model and then demonstrates how to create and publish assets in Contentful. Scott also shows how to query the assets using GraphQL and integrate the query into the application code.
#lesson
Scott discusses the process of creating a content model for a website's logo wall. He explains how to analyze the code to determine the necessary fields for the content model and then demonstrates how to create and publish assets in Contentful. Scott also shows how to query the assets using GraphQL and integrate the query into the application code.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Loading Images into Next.js
Scott explains how to configure Next.js to allow images from a specific domain to be loaded using the image component. He walks through the process of adding the domain to the Next.js config file and demonstrates how to use the image component to display images from Contentful. He also discusses options for controlling the order of the images and briefly mentions versioning content.
#lesson
Scott explains how to configure Next.js to allow images from a specific domain to be loaded using the image component. He walks through the process of adding the domain to the Next.js config file and demonstrates how to use the image component to display images from Contentful. He also discusses options for controlling the order of the images and briefly mentions versioning content.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Navigation Collection
Scott demonstrates how to add content to a webpage and control its order using a headless CMS. He shows how to create a navigation collection in Contentful, add buttons to the navigation, and then query and display the navigation links on the webpage.
#lesson
Scott demonstrates how to add content to a webpage and control its order using a headless CMS. He shows how to create a navigation collection in Contentful, add buttons to the navigation, and then query and display the navigation links on the webpage.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Content Blocks & Posts
Scott discusses the process of making a dynamic page in a static site using Next.js and a headless CMS. He explains how to create a content model for a customer post, including fields for title, slug, body, and customer. He then demonstrates how to query the customer post data using Apollo and Next.js, and create a dynamic route for the customer post page.
#lesson
Scott discusses the process of making a dynamic page in a static site using Next.js and a headless CMS. He explains how to create a content model for a customer post, including fields for title, slug, body, and customer. He then demonstrates how to query the customer post data using Apollo and Next.js, and create a dynamic route for the customer post page.
#lesson
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