🪓
Next.jsにshadcn-ui@latest initすると404にリダイレクトされる
起きたこと
NextJSプロジェクトに対して
npx shadcn-ui@latest init
を行いShadcnのセットアップを行うと、404にリダイレクトされる。。。What????
因みにnextのバージョンは13.5.6です。
解決方法
404にリダイレクトされる原因は、shadcnをinitした時ルートディレクトリに生成されたapp/globals.cssでした。こっちを参照されたらそりゃ404になるよね。
ここにあるglobals.cssの中身は使いたいので、コピーしてsrc/app/globals.cssに貼り付けてやります。後は不要なので、ディレクトリごと削除して対応完了です。
shadcn-uiのissueでもこの現象について言及されていました。
そもそもこうならないために
npx shadcn-ui@latest init
を走らせるとコマンドで色々聞かれると思うのですが、この中にある質問、
Where is your global CSS file? › › app/globals.css
これをデフォルトのまま走らせちゃったので、ルートディレクトリにapp/globals.cssが生まれてしまったというわけです。
Next.jsのAppDirを使っているのなら、src/app/globals.cssと指定してあげる必要があります。
エンター連打はやめようと思いました。参考になれば幸いです。
Discussion