執行後發生的錯誤

問題

目前大多發生在React 18的版本

1. Hydration failed because the initial UI does not match what was rendered on the server

2. Text content does not match server-rendered HTML.

3. There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

解決方案

1. 刪除".next"的資料夾，然後在重新執行"npm run dev"
2. 導入dynamic並使用ssr參數，讓API調用時呈現新數據

import dynamic from 'next/dynamic'
const Table = dynamic(() => import("/design-systems/Molecules/Table"), {
ssr: false,
});

3. 降版回到React17
4. 確認每個HTML標籤是否對應好或者使用好例如但並未用到

不正確：

<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

正確的：

<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
    </tr>
  </tbody>
</table>

這部分屬於最近執行create-next-app後會自動將React 直升18而產生出的問題，
在此提供給各位注意