nextjs13が発表されたので使ってみた

nextjs13が発表されたのでemotionとtwin.macroを入れようとしたができない

Nexjts13にEmotionは入れれない

~~結論から言うとNextjs13 app/directoryにEmotionは使用できない~~
'use client'を使用すればできないことはないのだが、後からTypeError: Cannot read properties of undefined (reading 'default') のエラーが発生する。この回避方法はまだ深くまで探していないが、これを回避できれば一応大丈夫になると思う。前回試したnext 13.0.1-canary.0ではだめでしたが、今回13.1.5では試してみたらできるっぽい。しかし、use clientを記述する必要がある。

この内容は古いのでnextjs13app安定版の内容を読むことをオススメします。

バージョン情報

emotion/css :11.10.5
@emotion/react :11.10.5
@emotion/styled :11.10.5
@next/font :13.1.5
emotion :11.0.0
eslint-config-next :13.1.5
eslint : 8.32.0
next : 13.1.5
react-dom :18.2.0
react: 18.2.0
@mui/material :5.11.6

エラーの理由

nextjs12とnextjs13でディレクトリー構成が大幅に変更され、サーバーサイドの扱いも変わるのが原因ぽい。
11月現在muiも同様のエラーが発生している

エラー内容

エラーは以下のエラーが発生する
「TypeError: React.createContext is not a function」他のパッケージ関係もnextjs13で同じ現象が報告されている。

回避方法

appディレクトリでテストしています。
'use Client'を使用すれば動く

app/page.jsx

'use client';
import { Inter } from '@next/font/google'
import styles from './page.module.css'
import { css } from '@emotion/css';
import Link from 'next/link';
import Button from '@mui/material/Button';
const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  const BaseFontSize =css`color:#c12929`;
  
  return (
    <main className={styles.main}>
    <Link
    className={BaseFontSize}
  href={{
    pathname: '/nextdirect',
    query: { name: 'test' },
  }}
>mainpage</Link>
<Button variant="contained">Hello World</Button>
    </main>
  )
}

有志の方が回避策を作ってくれている Wapper回避策

まだ議論中とりあえず'use client';を頭に入れれば動くみたい。全てのページに書くのが大変な場合はWapperを用意すればできる模様。

twin.macro

nextjs13でtwin.macroを使用しようと思いましたがエラーが発生していましました。エラー内容は以下の通り

error - ./node_modules/twin.macro/macro.js:5:15
Module not found: Can't resolve 'tailwindcss/lib/util/toPath'

これはtailwindcssをインストールしていないため発生したようなのでインストールしたら解決した。

npm install tailwindcss

nextjs13でエラーが発生したのだと思っていたが違っていました。
twin.macroのエラーが発生したがこれに関してはバージョンが2.8.3から3.0.0になったためでした。
通常のtailwindを使用していなかった私が悪かったのか...

公式ドキュメント

nextjs13

まとめ

nextjs13は非常に使いやすいと感じた。ディレクトリー構成がとてもスッキリしていたのでルーティング、レイアウトのコンポーネント作成管理がとてもやり易かった。実感はまだないがビルドも早いらしい。また、react18を使用しているためsuspenseを使用することができる点も評価したい。
nextjs13はまだ開発段階であり、「TypeError: React.createContext is not a function」のエラーはバグとして報告されているので直るのを待つしかない。
twin.macroのエラー「Module not found: Can't resolve 'tailwindcss/lib/util/toPath'」は検索しても引っ掛からなかったので非常に辛かった。

まだapp/directoryはbetaバージョンなのでまだ使うのは早そう。しかし個人的にはこのapp/directoryは使いやすそうなので非常に魅力的に感じる