bkinsey808 / bk-contentful-demo

This project demonstrates a possible approach combining NextJs, Contentful, and Storybook. The solution achieves SSG (static site generation) with the served site, and Component-Level fetching with Storybook.

Contentful Demo

This project demonstrates a possible approach combining NextJs, Contentful, and Storybook.

TODO

• tokens (besides color and borderRadius) set in tailwind config
• webhook to trigger deploy
• contentful images
• contentful preview api
• contentful rich text field
• form builder
• style navigation menu

Deployment

You will need to prepare for site deployment by installing vercel cli and logging in and chromatic deployment by getting a chromatic project token and setting CHROMATIC_PROJECT_TOKEN in your .env

Once set up, to deploy site to vercel and storybook to chromatic, run

yarn deploy

• Demo of site
• Demo of storybook

Features of this Project

• Perfect lighthouse score (so far...)

  

• NextJs

• Typescript

• Component demos with Storybook

• Bundle analysis with @next/bundle-analyzer and webpack-bundle-analyzer

• Code formatting with Prettier

  • usage enforced by lint rules

• Linting

  • Code linting with eslint
    • Cognitive complexity linting with SonarJs
  • Style linting with stylelint
  • Commit Message linting with commitlint
  • Relatively strict set of best practice lint rules

• Source code moved into src/ directory

• Absolute path alias

  • @/ is src/

• Circular dependency checking with madge

• Set of recommended extensions for Visual Studio Code

  • Code spell check with Code Spell Checker
  • Code complexity feedback in editor with CodeMetrics
  • Jest extension working for unit tests

• Git hooks with Husky

  • pre-push hook
    • Tests pass
    • Code is linted and formatted
    • No circular dependencies detected
  • commit-msg hook
    • Commit message is linted

• Continuous Integration example with GitHub Actions

Getting Started

git clone --depth=1 https://github.com/bkinsey808/contentful-demo.git my-project-name
cd my-project-name
yarn

This is a Next.js project bootstrapped with create-next-app.

Next steps

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details. .