next/dynamic

Next.jsでdynamic importするライブラリ

色々なパターンがある

読込中にloadingを表示することもできる

code:js

const Puppy = dynamic(() => import("../components/Puppy"), {

loading: () => <p>Loading...</p>

});

Style崩れなどが起きた場合はSSR設定を疑う

code:js

const DynamicComponentWithNoSSR = dynamic(

() => import('../components/hello3'),

{ ssr: false }

)

App Routerの登場により、使用機会が減っている

普通に以下のように書くだけでよくなった

code:ts

import { getUser } from './auth';

import { Dashboard, Landing } from './components';

export default async function Layout() {

const isLoggedIn = await getUser();

return isLoggedIn ? <Dashboard /> : <Landing />;

}

こう書いておけば、ログアウト済みの人にはDashboardは送られない

参考

実際に動く例を添えながら解説

named export のとき

code:ts

const PDFViewer = dynamic(

() => import('src/features/pdfs/components/index').then((m) => m.PDFViewer),

);

実装箇所