Swapped from Contentlayer to Keystatic as my CMS | Part 2 - Adding Keystatic to My Personal Website скачать в хорошем качестве

Swapped from Contentlayer to Keystatic as my CMS | Part 2 - Adding Keystatic to My Personal Website

This is Part 1 - Check out the rest of the videos here:    • How to set up Keystatic in an Exisiting Ne...   📚 Docs mentioned in this video: Keystatic Docs: https://keystatic.com/docs/installati... Next.js Metadata Dcos: https://nextjs.org/docs/app/building-... Contentlayer: https://contentlayer.dev/ 00:00 - Intro & Recap 00:23 - Add MDX Field to Schema 02:48 - Change Keystatic Form Layout 03:49 - Similarly, Add Reviews Collection 04:50 - Intro to Querying with Keystatic 05:24 - Initialise Keystatic Reader 06:24 - Use Reader API - Home Page 11:45 - Keystatic Entry Types 13:54 - Skip Typescript 14:26 - VSCode Multi-Cursor 15:16 - Refactor Reviews Section 16:00 - Dynamic Case Study Page 18:40 - Fetch MDX Field 19:48 - Disclaimer 20:26 - Exporting Next.js Metadata 21:26 - Next.js RSC & Deduping Requests 21:55 - Back to Metadata 23:56 - Generate Static Params 25:29 - Purge Contentlayer 26:23 - Complete Migration to Keystatic 26:35 - Outro & Sneakpeak In this video, we start with completing our Keystatic schema, adding the MDX field. We move into using the Keystatic Reader API to query the data we created and render it out on our pages. We start with the static Home page and move into the /work/slug dynamic page. Here we see how to fetch a single entry by slug. We have error handling in case we don't get back an entry. At the time of recording, Keystatic's docs on rendering the mdx field aren't fully fleshed out so for now we're skipping that and we export Next.js's metadata. Finally, we explain the getStaticParams function to let Next know which paths we're going to support so we can render pages on build rather than server render on request. Conclude by removing all the files and configuration from Contentlayer, completing our migration to Keystatic to add, edit and read our data from mdx files. 🚀 How I Set Up My Next.js Projects from Scratch: https://www.inquisit.blog/posts/how-i... 📈 What’s Next? In the next video, we're going to figure out how to render the content we receive from our mdx field. We're going to figure out how to add custom components to the mdx field and finally add some quality-of-life changes to the Keystatic Admin UI - for example, we can change the logo & name that show up on the top left and customise the fields that show in the list of collections. 👍 If you enjoyed this video or found value, consider pressing the like button. 💬 Got questions, feedback, or suggestions? Leave a comment below.