Closed5

日報作る

おーみーおーみー

久しぶりに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にクローズされました