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
PageLayout now accepts an optional imageSrc
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)
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
Implemented blog feed page
Implement blog post ("Article") page template
Less-significant changes
Generic "list feed" item (FeedItem.tsx)
Link to /blog-feed from the side bar
New packages
@portabletext/react - used for loading in rich text from sanity (e.g., blog post body content)
@sanity/client - for loading data in from Sanity.io
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
sanity-codegen - required for using the sanity types
prettier - a peer dependency for sanity-codegen
@types/react-syntax-highlighter - types for the syntax highlighter
Description
Implement page generation using Sanity data.
Important changes
.env.local
file (same contents as used in the gatsby site.env.development
file)dotenv
for Next.js sitesPageLayout
now accepts an optionalimageSrc
next.config.js
images
field and configured it to allow images fromcdn.sanity.io
(required in order to load images sourced from Sanity CMS)studio
ANDnext
)sanity-codegen
in both placesstudio
- required this package so that it can generate the typesnext
- required this package to use the built-in (Sanity) typesnpx sanity-codegen
from thestudio
directoryLess-significant changes
FeedItem.tsx
)/blog-feed
from the side barNew packages
@portabletext/react
- used for loading in rich text from sanity (e.g., blog post body content)@sanity/client
- for loading data in from Sanity.ioreact-syntax-highlighter
- React package for using either PrismJS or HighlightJSDev dependencies
sanity-codegen
- required for using the sanity typesprettier
- a peer dependency forsanity-codegen
@types/react-syntax-highlighter
- types for the syntax highlighter