Zenn
🚨

Next.js App Routerで個人開発ブログを作った時に陥ったエラー備忘録

2023/08/14に公開
Next.js
React
備忘録
App Router
tech

Intro

Next.jsとApp Routerでブログを作っています（途中です）。
App Router初心者なのでエラーにたくさんぶつかりました（良い経験になります）。

というわけで（？）、検索していてめっちゃ助かる「謎の備忘録おじさん※」を目指して、あたったエラー、なぜエラーが起きたのか、対応策を列挙していこうかと。

※謎の備忘録おじさん

metadetaと"use client";が競合したっぽいけど

エラーメッセージ
ReactServerComponentsError:

You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

    ,-[/Users/kiku28/blog/src/app/skills/page.tsx:9:1]
  9 |   return <Skills />;
 10 | }
 11 | 
 12 | export const metadata = getMetadata({
    :              ^^^^^^^^
 13 |   type: "website",
 14 |   pagePath: "/skills",
 15 |   title: "skills",
    `----

File path:
./src/app/skills/page.tsx
エラーメッセージ2（コンソール）
You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

    ,-[/Users/kiku28/blog/src/app/skills/page.tsx:9:1]
  9 |   return <Skills />;
 10 | }
 11 | 
 12 | export const metadata = getMetadata({
    :              ^^^^^^^^
 13 |   type: "website",
 14 |   pagePath: "/skills",
 15 |   title: "skills",
    `----

File path:
  ./src/app/skills/page.tsx

なぜ起きたのか

  • use clientとmetadataの競合
    wip

対応

  • ページ分離するだけ
    wip

URLのパスをwindowから取得したかったんだけど

＊エラーは出ますが開発中は動作しました。buildでエラーになりました。

エラーメッセージ（コンソール）
- error ReferenceError: window is not defined
    at Skills (./src/app/skills/_components/Skills.tsx:24:18)
  15 | 
  16 |   const pathName = usePathname();
> 17 |   const hash = window.location.hash.slice(1);
     |               ^
  18 | 
  19 |   function setSelectedViewAndRoute(view: SkillPageView) {
  20 |     setSelectedView(view);

なぜ起きたのか

  • URLの#以降の文字を取得したいなと思ってやりました
    wip

対応

useEffect内であれば動作するようです。
wip（コード例書きたい）

再起動したら治るタイプのエラー

エラーメッセージ（コンソール）
Unhandled Runtime Error
Error: read ECONNRESET

Call Stack
call
node_modules/axios/lib/core/AxiosError.js (89:13)
from
node_modules/axios/lib/adapters/http.js (591:24)
RedirectableRequest.emit
node:events (527:28)
emit
node_modules/follow-redirects/index.js (14:23)
ClientRequest.emit
node:events (527:28)
TLSSocket.socketErrorListener
node:_http_client (454:9)
TLSSocket.emit
node:events (527:28)
emitErrorNT
node:internal/streams/destroy (157:8)
emitErrorCloseNT
node:internal/streams/destroy (122:3)
processTicksAndRejections
node:internal/process/task_queues (83:21)

なぜ起きたのか

  • 急にエラーになってびっくりした（理由不明）
    wip

対応

wip

これだと動作しないっぽい：app/(home)/layout.tsx

エラーメッセージ（コンソール）
- error articles/page.tsx doesn't have a root layout. To fix this error, make sure every page has a root layout.
エラーメッセージ2（コンソール）
Failed to compile.

./src/app/layout.tsx
Module not found: Can't resolve './globals.css'

なぜ起きたのか

  • フォルダの見通しをよくしたくて、app/(home)/layout.tsxのように、(home)ディレクトリに格納したらエラーになっちゃいました。
  • さらに面倒なことに、一度(home)に入れた後、 上記のエラーメッセージ2の通り、cssのインポートの自動修正が効かない状態になっちゃいまいした。

対応

app直下に必ずlayout.tsxが必要で、それ以外は()にまとめても問題なさそう。
ちなみにですが、robots生成ファイルもapp直下じゃないと動かないかもです（詳細は未確認）

clientコンポーネントでは、serverコンポーネントからimportしたオブジェクトを使用できない

エラーメッセージ（ブラウザ）
Unhandled Runtime Error
Error: A "use server" file can only export async functions, found object.

Call Stack
Next.js
ensureServerEntryExports
node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-validate.js (15:18)
eval
webpack-internal:///(actionBrowser)/./src/app/inquiry/sendInquiry.ts (61:77)
Module.(actionBrowser)/./src/app/inquiry/sendInquiry.ts
/Users/kiku28/blog/.next/server/app/inquiry/page.js (3946:1)
Function.__webpack_require__
/Users/kiku28/blog/.next/server/webpack-runtime.js (33:43)
processTicksAndRejections
node:internal/process/task_queues (96:5)
async endpoint
node_modules/next/dist/build/webpack/loaders/next-flight-action-entry-loader.js?actions=%5B%5B%22%2FUsers%2Fkiku28%2Fblog%2Fsrc%2Fapp%2Finquiry%2FsendInquiry.ts%22%2C%5B%22inquirySchema%22%2C%22sendInquiry%22%5D%5D%5D&__client_imported__=true! (8:0)
async
/Users/kiku28/blog/node_modules/next/dist/server/app-render/action-handler.js (284:35)
async handleAction
/Users/kiku28/blog/node_modules/next/dist/server/app-render/action-handler.js (186:13)
async wrappedRender
/Users/kiku28/blog/node_modules/next/dist/server/app-render/app-render.js (1052:37)
async doRender
/Users/kiku28/blog/node_modules/next/dist/server/base-server.js (1153:26)
async cacheEntry.responseCache.get.incrementalCache.incrementalCache
/Users/kiku28/blog/node_modules/next/dist/server/base-server.js (1300:28)
async
/Users/kiku28/blog/node_modules/next/dist/server/response-cache/index.js (99:36)

なぜ起きたのか

  • server actionsでPOSTするコードを書いていて、zodのスキーマを同じファイルで定義していました。それ自体は問題なかったのですが、何気なくexportしてpageからzodのオブジェクトを使用しようとしたら上記のエラーに当たリました。
  • 冷静に考えると当たり前なのですが、不慣れなServer Actionsを使用していてエラーの原因が分からず戸惑いました。

対応

app/inquiry/_libフォルダにinquirySchema.tsファイルを作りzodのスキーマを移動

Discussion