Next.jsをSSRとか切ってSPAのように使う

code:js

import React from 'react';

import { AppProps } from 'next/app';

import dynamic from 'next/dynamic';

const App = ({ Component, pageProps }: AppProps) => {

const SafeHydrate = dynamic(() => import('../components/SafeHydrate'), { ssr: false });

return (

</SafeHydrate>

);

};

export default App;

普通にdynamic importをまるごと使っちゃう

なんかこう言うのも出てくるが、↑で良いと思う

code:js

import { AppProps } from 'next/app';

function App({ Component, pageProps }: AppProps) {

return (

<div suppressHydrationWarning> // <- ADD THIS

{typeof window === 'undefined' ? null : <Component {...pageProps} />}

</div>

);

}

export default App;

要は全体の_app.jsで、windowが無ければ何も出さんということ

SSR, SSGのとき（windowがないとき）

何も表示させない

suppressHydrationWarningする

部分的にssrを切る

公式が言ってるので十分だが一応ほかも