Closed7

GatsbyJSで作られたブログをNext.jsにマイグレーションする

Kentaro MatsushitaKentaro Matsushita

下準備

  • next のインストール
  • Gatsbyjs系パッケージ削除
  • react, react-dom, typescript のアップデート
  • .gitignore 変更
    • .next 追加
    • .cache, public 削除
  • ディレクトリリネーム
    • static -> public
Kentaro MatsushitaKentaro Matsushita

個別記事のページを表示する

Kentaro MatsushitaKentaro Matsushita

tsconfig.jsonの書き換え

next dev コマンドでサーバーを起動する際に、 tsconfig.json の書き換えが行われた。

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
We detected TypeScript in your project and reconfigured your tsconfig.json file for you.

The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:

	- allowJs was set to true
	- forceConsistentCasingInFileNames was set to true
	- exclude was set to ['node_modules']

The following mandatory changes were made to your tsconfig.json:

	- moduleResolution was set to node (to match webpack resolution)
	- resolveJsonModule was set to true (to match webpack resolution)
	- isolatedModules was set to true (requirement for babel)
	- jsx was set to preserve (next.js implements its own optimized jsx transform)
diff --git a/tsconfig.json b/tsconfig.json
index 43ea22c..b8fe3db 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,15 +1,28 @@
 {
-  "include": ["./src/**/*"],
+  "include": [
+    "./src/**/*"
+  ],
   "compilerOptions": {
     "target": "esnext",
     "module": "commonjs",
-    "lib": ["dom", "es2017"],
-    "jsx": "react",
+    "lib": [
+      "dom",
+      "es2017"
+    ],
+    "jsx": "preserve",
     "strict": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "noEmit": true,
-    "skipLibCheck": true
-  }
-} 
\ No newline at end of file
+    "skipLibCheck": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

Kentaro MatsushitaKentaro Matsushita

画像の取り扱い

  • 現状は記事ごとにディレクトリを切って、その内部にマークダウンファイルと画像を格納
    • MDXパッケージと連携させ、画像を読み込んで表示させるのかを調査
      • public ディレクトリに画像を配置すれば動くようだ
        • どのブログ記事に紐づく画像なのかを意識して管理するのが面倒

役立ちそうなリンク

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