GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → hiro08gh → next-microcms-sample

hiro08gh / next-microcms-sample

Licence: other
Next.js + microCMS SSG example.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactnextssgmicrocmsnextjs-template

Projects that are alternatives of or similar to next-microcms-sample

next
(Work in progress) The rewritten version of the original PizzaQL 🍕
Stars: ✭ 45 (+221.43%)
Mutual labels:  next, ssg
personal-website
Personal website – made with Next.js, Preact, MDX, RMWC, & Vercel
Stars: ✭ 16 (+14.29%)
Mutual labels:  next, ssg
next-saas-starter
⚡️ Free Next.js responsive landing page template for SaaS products made using JAMStack architecture.
Stars: ✭ 497 (+3450%)
Mutual labels:  next, nextjs-template
next-netlify-starter
A one-click starter project for Next and Netlify
Stars: ✭ 76 (+442.86%)
Mutual labels:  next
grommet-dashboard
React nextjs grommet 2 dashboard template
Stars: ✭ 39 (+178.57%)
Mutual labels:  nextjs-template
next-test-api-route-handler
🚀✨ Confidently unit test your Next.js API routes/handlers in an isolated Next.js-like environment
Stars: ✭ 150 (+971.43%)
Mutual labels:  next
Beauty-Saurus
🦖 Beautiful Docusaurus ✨ Easy-Starter ✨ Project
Stars: ✭ 47 (+235.71%)
Mutual labels:  ssg
React.ai
It recognize your speech and trained AI Bot will respond(i.e Customer Service, Personal Assistant) using Machine Learning API (DialogFlow, apiai), Speech Recognition, GraphQL, Next.js, React, redux
Stars: ✭ 38 (+171.43%)
Mutual labels:  next
eleventy-plugin-cloudinary
An Eleventy shortcode that allows you to add an image from your cloudinary account
Stars: ✭ 28 (+100%)
Mutual labels:  ssg
vscode-azurestaticwebapps
Azure Static Web Apps extension for VS Code
Stars: ✭ 63 (+350%)
Mutual labels:  ssg
parse-react
[EXPERIMENTAL] React, React Native, and React with SSR (e.g. Next.js) packages to interact with Parse Server backend
Stars: ✭ 58 (+314.29%)
Mutual labels:  next
next-api-compose
🧬 Simple, dependency free, error aware and powerful utility to compose chain of multiple middleware into one Next.js API Route.
Stars: ✭ 22 (+57.14%)
Mutual labels:  next
storybook-addon-next
A no config Storybook addon that makes Next.js features just work in Storybook
Stars: ✭ 184 (+1214.29%)
Mutual labels:  next
fullstack-nextjs-ecommerce
Fullstack Next.js E-Commerce made with NextAuth + Prisma, Docker + TypeScript + React Query + Stripe + Tailwind Sentry and much more 🛒
Stars: ✭ 524 (+3642.86%)
Mutual labels:  nextjs-template
nextjs-redux
Boilerplate for using nextjs and redux
Stars: ✭ 13 (-7.14%)
Mutual labels:  nextjs-template
xidoc
A consistent markup language
Stars: ✭ 40 (+185.71%)
Mutual labels:  ssg
shopify-node-react-app
Shopify paid app in Node.js & React.js that connects to a store and lets merchants select products to automatically discount them in the Shopify admin interface.
Stars: ✭ 29 (+107.14%)
Mutual labels:  next
plain
network .md into .html with plaintext files
Stars: ✭ 70 (+400%)
Mutual labels:  ssg
contrib-nextjs
Projeto desenvolvido no Contrib de Next.js
Stars: ✭ 11 (-21.43%)
Mutual labels:  ssg
mongoose-aggregate-paginate-v2
A cursor based custom aggregate pagination library for Mongoose with customizable labels.
Stars: ✭ 103 (+635.71%)
Mutual labels:  next
View All Similar Projects ➔

Next.js + microCMS

Next.jsのgetStaticPropsとgetStaticPaths を使ってmicroCMSのデータを取得して、静的にビルドするサンプル。

バージョン

  • Next.js 11.1.0
  • React 17.0.1
  • ReactDOM 17.0.1

コンテンツモデル

まず最初にmicroCMS側でコンテンツモデルを作成する必要があります。

API名 - ブログ

エンドポイント - blogs

APIスキーマ

  • title -> テキストフィールド

始め方

$ yarn install

.env.development.localを作成。

$ touch .env.development.local

開発サーバーの立ち上げ

microCMSで取得しAPIキーとエンドポイントをenvファイルに記述。

API_KEY=xxxxx
ENDPOINT=https://your.microcms.io/api/v1

アプリケーションの立ち上げ

$ yarn dev

SSG

$ yarn export
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].