Closed7
GatsbyJSで作られたブログをNext.jsにマイグレーションする
公式ドキュメントベースで作業を進めていく
下準備
-
next
のインストール - Gatsbyjs系パッケージ削除
-
react
,react-dom
,typescript
のアップデート -
.gitignore
変更-
.next
追加 -
.cache
,public
削除
-
- ディレクトリリネーム
-
static
->public
-
個別記事のページを表示する
-
/[slug]
の個別記事表示- 記事データ取得・表示実装
-
src/pages
配下に[slug].tsx
を追加- GatsbyJSパッケージに依存している
404.tsx
などのページがある場合は、エラーが出た- 別の場所に一時退避した
- GatsbyJSパッケージに依存している
- とりあえず表示できた
- 画像は表示できない
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"
+ ]
+}
記事一覧のページを表示する
- 記事一覧取得
-
https://github.com/vercel/next-learn-starter/blob/master/typescript-final/lib/posts.ts
-
getSortedPostsData
の実装
-
-
https://github.com/vercel/next-learn-starter/blob/master/typescript-final/lib/posts.ts
-
src/pages/index.tsx
の追加-
getStaticProps
の実装-
getSortedPostsData
で記事一覧取得
-
-
- とりあえず表示できた
スタイリング
-
chakra-ui
を使ってみる - OpenChakra
- Chakra UI用のエディタ
- コンポーネントのコード書き出しにも対応
画像の取り扱い
- 現状は記事ごとにディレクトリを切って、その内部にマークダウンファイルと画像を格納
- MDXパッケージと連携させ、画像を読み込んで表示させるのかを調査
-
public
ディレクトリに画像を配置すれば動くようだ- どのブログ記事に紐づく画像なのかを意識して管理するのが面倒
-
- MDXパッケージと連携させ、画像を読み込んで表示させるのかを調査
役立ちそうなリンク
このスクラップは2021/02/27にクローズされました