🍇

日本語を綺麗に表示できるBudouXをNextJS 14で使ってみた

2024/04/23に公開

Next.js

NextJS / Typescript環境で長い日本語文字列をうまく改行して表示したくてBudouXを導入した

環境

NextJS: 14.1.0
budoux: ^0.6.2

install

pnpm i budoux

usage

parserがどう機能するか

BudouXで日本語文字列をparseすると、フレーズのArrayが返ってくる

const parser = new Parser();
console.log(parser.parse('今日は天気です。'));
// ['今日は', '天気です。']

なので、日本語文字列をうまくフレーズで改行して表示したければ、適当なタグで囲ってdisplay: inline-blockにすると良い

Parserだけ使う　/ loadDefalutJapaneseParserはSSRに適さない

loadDefaultJapaneseParserはHTMLProcessingを内部的に使っており、サーバー側でレンダリングしたいときなどのwindowオブジェクトが存在しない時にparserを使おうとするとwindow is not definedのエラーが発生する

代わりにweb workerでパーサーだけ使うと良い

import { jaModel, Parser } from "budoux";

export const BudouXText: React.FC<{ text: string }> = ({ text }) => {
  const parser = new Parser(jaModel);
  const segments = parser.parse(text);

  return segments.map((s, index) => (
    <span className="inline-block" key={index}>
      {s}
    </span>
  ));
};

sample

const Page = () => {
  const text = `budouX は、Googleが開発した自然言語処理ツールです。このツールの主な機能は、テキスト中の単語を適切な場所で改行することで、読みやすさを向上させることにあります。特に日本語のような言語で有効で、日本語は単語の境界が明確でないことが多いため、適切な改行点を見つけるのが難しいです。`;
  return (
    <div className="p-2.5 font-sans">
      <BudouXText text={text} />
    </div>
  );
};

他の方法で使えないの？

BudouXにはWebコンポーネントとして使う方法や、word-break: “auto-phrase”を使う方法など様々な方法で適用することができる。

NextJSで使うとなった時にword-break: “auto-phrase”(2023/10リリース)を指定できればベストだったのだが、NextJSはまだサポートしていなさそうだったので断念