- Rename the
.env.example
file to.env.local
and fill in the variables. npm install
.npm run dev
.
npm run lint .
.
- #1 - Intro & Setup.
- #2 - Contentful Models.
- #3 - Contentful Client.
- Sarthak Sharma's Setting up ESLint and Prettier For Your Next.js Project blog post.
- Paulin Trognon's Start a clean Next.js project with TypeScript, ESLint and Prettier from scratch blog post.
- Eshwaren M's Enable Emmet support for JSX in Visual Studio Code | React blog post.
- #4 - Outputting Recipe Data.
- #5 - Using Images from Contentful.
- #6 - Styled JSX.
- #7 - Generating Paths.
- #8 - Rich Text Content.
- #9 - Deploying to Vercel.
- #10 - Incremental Static Regeneration.
- #11 - Fallback Pages.
- #12 - Conditional Redirects.
- #13 - Custom 404 Page.
- #14 - Vercel Deploy Hooks.
- Primer React (React implementation of GitHub's Primer Design System).
npx create-next-app [your-site-name] -e https://github.com/iamshaunjp/next-contentful/tree/lesson-1-starter-site
.- Contentful (headless CMS).
Title must be between 3 & 50 chars long
.- Slug regex (source):
^[a-z0-9]+(?:-[a-z0-9]+)*$
. npm i contentful
.npm install -D eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
.- VS Code ESLint extension.
npm install -D prettier eslint-plugin-prettier eslint-config-prettier
.- the component gallery (repo):
- Language Identifiers (VS Code).
- SmolCSS.
- Deep Water (VS Code theme).
- Panda Syntax (VS Code Theme).
- @contentful/rich-text-react-renderer package.
- Vercel (add the environment variables from the
.env.local
file). - Incremental Static Regeneration: Next.js generates new pages and regenerates the current pages on the fly when data is updated.
- Fallback pages: placeholder content while Next.js fetches new data for a page.
- Classifying your repository with topics.