【備忘録】Next.jsでクライアントコンポーネントから呼び出せない関数を作成する

はじめに

この記事は server-only の 挙動理解 と 使い方 の備忘録です。

インストール

npm install server-only

server-only とは

サーバコンポーネントからのみ呼び出したい関数 を クライアントコンポーネント から
呼び出せなくするライブラリ です。

import "server-only"

と記述することで 適用 出来ます。

挙動理解

クライアントコンポーネント から server-onlyを使った関数 を呼び出すが
エラーがスロー されて呼び出せない 実装例 を下記に示します。

app/page.tsx

"use client";

import { serverSideExecution } from "@/datas/serverSideExecution";

export default function Home() {
  const temp = serverSideExecution();

  return (
    <div>{temp}</div>
  );
}

datas/serverSideExecution.ts

import "server-only"

export const serverSideExecution = () => {
    return "サーバ側でのみ実行されます。"
}

このような エラーをスロー します。

さいごに

学習させていただいた先・ライブラリの公式ドキュメント・リンクです。