Zenn
🐰

実践TypeScirptの第10章をNext.js 14に対応してみた

2023/03/24に公開
Next.js
React
TypeScript
tech

実践TypeScirptの第10章をversion指定せずに、
yarn add したらハマったので対応した内容

実践TypeScirpt

https://book.mynavi.jp/ec/products/detail/id=104703

サンプルコード(PR)

https://github.com/xy2e45/ts-nextjs-redux/pull/1/files

Version up

package.json
-     "next": "^8.0.4",
+     "next": "^13.2.1",

-     "react": "^16.8.6",
+     "react": "^18.2.0",

-     "redux": "^4.0.1",
+     "redux": "^4.2.1",

主な対応内容

  • 関数コンポーネントに書き換え

  • pages/_app.tsx
    withRedux→createWrapper・wrapper.useWrappedStore

  • store/counter/types.ts store/todos.types.ys
    export =→export default

  • store/index.ts
    createStore→configureStore

  • 不要なファイルの削除

    • types/shims-next.d.ts
    • next.config.js

作業ログ

git clone

  • 著者のリポジトリ

https://github.com/takefumi-yoshii/ts-nextjs-redux

yarn add

  • version指定なしでadd

yarn dev

  • エラーになる
    • メッセージ内容に合わせて ts.config.json を修正
メッセージ
The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:

	- lib was set to dom,dom.iterable,esnext
	- allowJs was set to true
	- skipLibCheck was set to true
	- forceConsistentCasingInFileNames was set to true
	- noEmit was set to true
	- incremental was set to true
	- exclude was set to ['node_modules']

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

	- resolveJsonModule was set to true (to match webpack resolution)
	- isolatedModules was set to true (requirement for SWC / Babel)
	- jsx was set to preserve (next.js implements its own optimized jsx transform)

yarn dev

  • 以下エラーになる
    • @zeit/next-typescriptを個別で導入する必要はなくなったよう
    • next.config.js , .babelrc を削除
エラーメッセージ
@zeit/next-typescript is no longer needed since Next.js has built-in support for TypeScript now. Please remove it from your next.config.js and your .babelrc

yarn dev

  • 以下エラーになる
エラーメッセージ
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at _app.tsx:22.

pages/_app.tsx エディタ上のエラー解決

  • next/app から Container , NextAppContext が importできない
    • Container は不要になっているので削除
    • NextAppContext → AppContext に置き換え
  • initStore のタイプ不一致
    • store/index.tsx でエディタ上で configureStore の利用を推奨される
      • @reduxjs/toolkit を追加
      • createStore → configureStore に書き換え

yarn dev

  • 以下のエラーになる
    • createWrapper() を利用したほうがメッセージがあったので対応
メッセージ
/!\ You are using legacy implementation. Please update your code: use createWrapper() and wrapper.withRedux().
/!\ You are using legacy implementation. Please update your code: use createWrapper() and wrapper.useWrappedStore().


TypeError: Cannot read property 'getState' of undefined
    at /var/www/html/ts-nextjs-redux/node_modules/react-redux/lib/components/Provider.js:32:57

yarn dev

  • 相変わらず、undefined …
  • 気になるメッセージが出力されていたので、pages/_document.tsx を確認
メッセージ
TypeError: Cannot read property 'getState' of undefined
    at /var/www/html/ts-nextjs-redux/node_modules/react-redux/lib/components/Provider.js:32:57


Your custom Document (pages/_document) did not render all the required subcomponent.
Missing component: <Html />

pages/_document.tsx エディタ上のエラー解決

  • NextDocumentContext がimportできない
    • NextDocumentContext → DocumentContext に修正
  • Html... layouts/index.tsxを確認
    • html → Html に書き換え

yarn dev

  • 動いた…

さいごに

対応した際に手掛かりとしたメッセージなどまとめてみました
どなたかの参考になれば

Discussion