search

ax-vasquez / mcnuggies-blog

NextJS site & Sanity Studio code for mcnuggies.dev
http://www.mcnuggies.dev
1 stars 1 forks source link

Page generation #83

Closed ax-vasquez closed 2 years ago

ax-vasquez commented 2 years ago

Description

Implement page generation using Sanity data.

Important changes

  1. Add .env.local file (same contents as used in the gatsby site .env.development file)
    • You don't need dotenv for Next.js sites
    • This file "just works" out-of-the-box
  2. PageLayout now accepts an optional imageSrc
  3. Updates to next.config.js
    • Added images field and configured it to allow images from cdn.sanity.io (required in order to load images sourced from Sanity CMS)
  4. Sanity type generation (changes to both studio AND next)
    • Installed sanity-codegen in both places
      • studio - required this package so that it can generate the types
      • next - required this package to use the built-in (Sanity) types
    • Any time you make changes to the schema, you need to re-run npx sanity-codegen from the studio directory
  5. Implemented blog feed page
  6. Implement blog post ("Article") page template

Less-significant changes

  1. Generic "list feed" item (FeedItem.tsx)
  2. Link to /blog-feed from the side bar

New packages

  1. @portabletext/react - used for loading in rich text from sanity (e.g., blog post body content)
  2. @sanity/client - for loading data in from Sanity.io
  3. react-syntax-highlighter - React package for using either PrismJS or HighlightJS
    • This was only used because I had previously-used this in an earlier implementation of the site - since I only use PrismJS, I intend to look into removing this package and instead using "vanilla" PrismJS (depending on the tradeoffs)

Dev dependencies

  1. sanity-codegen - required for using the sanity types
  2. prettier - a peer dependency for sanity-codegen
  3. @types/react-syntax-highlighter - types for the syntax highlighter