nextjsのApp Routerの安定版がきたのでTailwindとemotionを入れてみました。
pagesからappにファイル構造が変わって、appめちゃくちゃいいじゃんと思い続け、安定版のNext1.34バージョン公開されたということで、本格的に使って行こうと思いTailwindとEmotionを入れてみました。
最新の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
無事に実行できたことが確認できました。
emotion関連のモジュールをインストールします。
npm i @emotion/css @emotion/styled @emotion/react
続いてtwin.macroとtailwindcssをインストールします。
npm install twin.macro tailwindcss
必要なパッケージのインストールが終わりましたが、このままではエラーが発生します。このエラーはnextjsの環境で発生します。
以下エラー内容です。
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のファイルをルートに追加します。
module.exports = {
presets: [['next/babel', { 'preset-react': { runtime: 'automatic' } }]],
plugins: [
'babel-plugin-macros',
],
}
"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>
)
}
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の恩恵もあるので今後もっと使って行く予定でいます。
質問や、間違いがありましたら、お気軽にどうぞ
※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください
