最新nextjs13系でのトラブル

この記事を見て悩んだ事

トラブル１ 最新のnextのversionだと下記のようなエラーがでて怒られる場合

対策１
"use client";としてpage.jsは基本はserverサイドだから動的にかわるものはuse clientを付けると上手くいく

対策２
→nextのversionは13.4系でないと駄目。。

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: connect ECONNREFUSED ::1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 3000
  }
}

Error occurred prerendering page "/posts". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)

json(pakage.json)

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^3.3.2",
    "@prisma/client": "^5.5.2",
    "@supabase/auth-helpers-nextjs": "^0.7.4",
    "@types/node": "20.2.5",
    "@types/react": "18.2.7",
    "@types/react-dom": "18.2.4",
    "@types/uuid": "^9.0.1",
    "autoprefixer": "10.4.14",
    "bootstrap": "^5.3.2",
    "encoding": "^0.1.13",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.4",
    "mysql2": "^3.6.2",
    "navigation": "^6.2.0",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.47.0",
    "react-toastify": "^9.1.3",
    "supabase": "^1.106.1",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4",
    "uuid": "^9.0.0",
    "zod": "^3.22.4",
    "zustand": "^4.4.4",
    "next": "13.4.4"
  },
  "devDependencies": {
    "prisma": "^5.5.2"
  }
}

トラブル2 データが更新されない場合

・データをキャッシュから読み込んでいるので、下記のようにキャッシュから取得しないようにする

対策①

const response = await fetch("http://localhost:3000/api/posts", {
    cache: "no-store",
  });

対策②

スーパーリロードを行う

control＋shift＋R

その他にも、nextコンフィグでの設定やブラウザのキャッシュをチェック入れるなどもあるので開発に応じて対応する