Next.js Blog with microCMS

R
Renaudil y a 2 jours
0

Description

A simple blog, built with Next.js and microCMS.

npx boilerapp nextjs-blog-with-microcms

文档

Simple Blog with microCMS

This is an official microCMS simple blog template.

This blog is built using microCMS, a headless CMS made in Japan, and Next.js.

This template supports authoring and editing the following blog content and information:

  • Blog details
  • Writer
  • Tags

Demo

https://simple-blog-with-microcms.vercel.app/

Deploy with Vercel

Configuration

Create an account and a service on microCMS

  1. Create an account on microCMS.
  2. Create a new empty service from the dashboard. When creating the service, please select "Create your own".
  3. Enter any value you like for Service Name and Service ID.
  4. You now have a new service created that you can access!

Create APIs

You will need to create three APIs, all in the list format.

Create tag API.

The tag API is for creating tags associated with blog content. Blog content can have multiple tags set within the tag API.

  1. Go to /create-api (https://your-service-id.microcms.io/create-api) and select "Create your own".
  2. Enter basic API information:
    • API Name: tag
    • Endpoint: tags
  3. Select API Type and choose List Format.
  4. Define API Schema. The tag API has one field:
    • name - Text Field. Field ID and Display Name should be set to name.
  5. Click "Create" and continue.

Create writer API

The writer API is for creating author information and associating it with each blog article. A blog article can only have one writer set in the writer API.

  1. Go to /create-api (https://your-service-id.microcms.io/create-api) and select "Create your own".
  2. Enter basic API information:
    • API Name: writer
    • Endpoint: writers
  3. Select API Type and choose List Format.
  4. Define API Schema. The writer API has three fields:
    • name - Text Field. Field ID and Display Name should be set to name.
    • profile - Text Area. Field ID and Display Name should be set to profile.
    • image - Image Field. Field ID and Display Name should be set to image.
  5. Click "Create" and continue.

Create blog API

The blog API is for creating blog content.

  1. Go to /create-api (https://your-service-id.microcms.io/create-api) and select "Create your own".
  2. Enter basic API information:
    • API Name: blog
    • Endpoint: blog
  3. Select API Type and choose List Format.
  4. Define API Schema. The blog API has six fields:
    • title - Text Field. Field ID and Display Name should be set to title.
    • description - Text Area. Field ID and Display Name should be set to description.
    • content - Rich Text Editor. Field ID and Display Name should be set to content.
    • thumbnail - Image Field. Field ID and Display Name should be set to thumbnail.
    • tags - Multiple Content References - tag. Field ID and Display Name should be set to tags.
    • writer - Content Reference - writer. Field ID and Display Name should be set to writer.
  5. Click "Create" and continue.

Enter Content

  1. Enter content for the tag API, writer API, and blog API. Since the tag API and writer API are referenced from the blog API, please create the blog API content last.

  2. Go to the /apis/[tags|writers|blog]/create endpoint, click "+ Add\

Prix

Gratuit

FREE

评论 (0)

常见问题

常见问题解答 (FAQ)

有问题?我们有答案。如果您找不到想要的答案,请随时联系我们。

Boilerapp 是一个专门用于分享 Boilerplates、入门套件(Starter Kits)和项目模版的开发者社区平台。我们的目标很简单:为您节省初始配置(Setup)的时间,让您可以专注于真正重要的代码。无论您是在寻找简单的代码库还是完整的 SaaS 项目,都能在这里找到。

还有其他问题?

我们的团队随时为您提供帮助。联系我们,我们将尽快回复。