NextJSでNetlify CMSをローカルに構築してみる

mkdir demo-cms
cd demo-cms
新規プロジェクトの初期化
yarn init -y
必須パッケージをインストール
yarn add react react-dom next
Markdown形式のwebpackローダのインストール
yarn add --dev frontmatter-markdown-loader
ページフォルダを作成、インデックスファイルを追加
mkdir pages
touch pages/index.js
コンテンツ用フォルダを作成、コンテンツファイルを作成
mkdir content
touch content/home.md
静的なassetsを配置するフォルダを作成
mkdir public
スクリプトを追加
package.json
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "yarn run build && next export"
date: 2019-03-17T19:31:20.591Z
cats:
  - description: 'Maru is a Scottish Fold from Japan, and he loves boxes.'
    name: Maru (まる)
  - description: Lil Bub is an American celebrity cat known for her unique appearance.
    name: Lil Bub
  - description: 'Grumpy cat is an American celebrity cat known for her grumpy appearance.'
    name: Grumpy cat (Tardar Sauce)
Welcome to my awesome page about cats of the internet.
This page is built with NextJS, and content is managed in Netlify CMS
                test: /\.md$/,
                loader: 'frontmatter-markdown-loader',
                options: { mode: ['react-component'] }
        return cfg;
import Head from "next/head"
import { Component } from 'react'
import { attributes, react as HomeContent } from '../content/home.md';
export default class Home extends Component {
  render() {
    let { title, cats } = attributes;
    return (
          <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"




    
></script>
        </Head>
        <article>
          <h1>{title}</h1>
          <HomeContent />
            {cats.map((cat, k) => (
              <li key={k}>
                <h2>{cat.name}</h2>
                <p>{cat.description}</p>
        </article>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>content manager</title>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
  <!-- include the script that builds the page and powers netlify cms -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
      file: "content/home.md"
      fields:
        - { label: "Title", name: "title", widget: "string"}
        - { label: "Publish Date", name: "date", widget: "datetime" }
        - { label: "Body", name: "body", widget: "markdown"}
        - label: 'Cats'
          name: "cats"
          widget: list
          fields:
            - { label: "Name", name: "name", widget: "string"}
            - { label: "Description", name: "description", widget: "text"}
~~省略~~
Error: Failed to import @babel/core or/and @babel/preset-react: 
If you intend to use 'react' mode, install both to your project: 
https://hmsk.github.io/frontmatter-markdown-loader/react.html
$ yarn run dev
~~省略~~
Syntax error: Support for the experimental syntax 'jsx' isn't currently enabled (9:7):
~~省略~~
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.