日報作る

おーみー

日報を作ります．

おーみー

久しぶりにGatsbyでやっていく．npm init gatsby でいい感じになる．

おーみー

新しいJSX変換を有効化する．JSXだけ使う場合には import React from "react" しなくてよくなる．

babel.config.js

module.exports = /** @type {import('@babel/core').TransformOptions} */ ({
  presets: [
    [
      "babel-preset-gatsby",
      {
        reactRuntime: "automatic",
        targets: {
          // browsers: ["last 2 versions, not dead, not IE 11"],
        },
      },
    ],
  ],
});

おーみー

この title タグでtitle指定する魔法はなんなんだ？

src/index.tsx

const IndexPage = () => {
  return (
    <main>
      <title>夜報</title>
      <h1>夜報</h1>
    </main>
  );
};

export default IndexPage;

おーみー

Next.jsの[id].tsxに対抗した動的ルーティングを導入している．どうやらGraphQLを使えるみたいで，{mdx.slug}みたいな感じでやるとGatsbyのmdxノードのslugプロパティでページが生やせる．

このスクラップは2021/12/10にクローズされました