Hero img
nextjs13にemotion tailwind

next@13.4.4でApp Routerが(stable)になったので tailwindとemotionを入れた

nextjsのApp Routerの安定版がきたのでTailwindとemotionを入れてみました。


目次

  • Nextj13
  • バージョン情報
  • Nextjs13.4を使う
  • emotionとtailwind.cssをインストールする
  • nextjsエラーの解決
  • 公開
  • まとめ

Nextj13

pagesからappにファイル構造が変わって、appめちゃくちゃいいじゃんと思い続け、安定版のNext1.34バージョン公開されたということで、本格的に使って行こうと思いTailwindとEmotionを入れてみました。

バージョン情報

  • @emotion/css@11.11.0
  • @emotion/react@11.11.0
  • @emotion/styled@11.11.0
  • next@13.4.4
  • react@18.2.0
  • tailwindcss@3.3.2
  • twin.macro@3.3.1

Nextjs13.4を使う

最新のNextjs環境をダウンロードします。

npx create-next-app@latest

色々聞かれますのでお好みで設定してもいいですが、今回はapp router環境が使いたかったのでこれだけはYesで実行してください。

What is your project named? » test-project
Would you like to use TypeScript with this project? »  Yes
Would you like to use ESLint with this project? »  Yes
Would you like to use Tailwind CSS with this project? »  Yes
Would you like to use `src/` directory with this project? » No 
Use App Router (recommended)? » Yes <--これ
Would you like to customize the default import alias? »  Yes

設定が終わったらとりあえず実行ができるかのテストを行います。

npm run dev

無事に実行できたことが確認できました。 nextj13-firstdev

emotionとtailwind.cssをインストールする

emotion関連のモジュールをインストールします。

npm i @emotion/css @emotion/styled @emotion/react 

続いてtwin.macroとtailwindcssをインストールします。

npm install twin.macro tailwindcss

nextjsエラーの解決

必要なパッケージのインストールが終わりましたが、このままではエラーが発生します。このエラーはnextjsの環境で発生します。

babel-plugin-macrosエラー

以下エラー内容です。

The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly

このエラーについては.babelrc.jsのファイルをルートに追加します。

.babelrc.js
module.exports = {
  presets: [['next/babel', { 'preset-react': { runtime: 'automatic' } }]],
  plugins: [
    'babel-plugin-macros',
  ],
}

next/fontエラー

"next/font" requires SWC although Babel is being used due to a custom babel config being present.

先ほど.babelrc.jsを作成したのでnext/fontは使えませんと言われるので

layout.tsxの中の修正します。 修正後

import './globals.css'
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

use clientエラー

createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

これはuse clientをpage.tsxの先頭に追加するだけです。

'use client';
import Image from 'next/image'

公開

上記の設定を行ったサンプルを githubに載せておきます。

まとめ

nextjs13のapp ディレクトリ構成は非常に扱いやすいと思っています。ようやく安定版が公開され、とても期待しています。tailwindとemotionをインストールするのにくせが少しありますが、react18の恩恵もあるので今後もっと使って行く予定でいます。

関連記事

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください