Zenn
🍇

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

2024/04/23に公開
Next.js
TypeScript
#
budoux
#
App Router
tech

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

https://github.com/google/budoux/tree/main/javascript/

環境

  • NextJS: 14.1.0
  • budoux: ^0.6.2

install

pnpm i budoux

usage

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

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

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

'use client';

import { useEffect, useState } from "react";
import { loadDefaultJapaneseParser } from "budoux";

export const BudouXText: React.FC<{ text: string }> = ({ text }) => {
  const [segments, setSegments] = useState<string[]>([]);

  useEffect(() => {
    const parser = loadDefaultJapaneseParser();
    const parsedSegments = parser.parse(text);
    setSegments(parsedSegments);
  }, [text]);

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

sample

const Page = () => {
	return (
      <div className="p-2.5 font-sans">
        <BudouXText text={text} />
      </div>
	    )
}

useStateやuseEffectで管理しないとwindow is not definedになる

https://zenn.dev/minojiro/articles/772ba9be722255

この例のような実装を行うと、internal server errorが発生する

'use client';

import { loadDefaultJapaneseParser } from "budoux";

const parser = loadDefaultJapaneseParser();

export const useBudouX = () => {
  const parse = (text: string) => {
    return parser.parse(text).map((s, index) => (
      <span className="inline-block" key={index}>
        {s}
      </span>
    ));
  };
  return {
    parse,
  };
};

const {parse} = useBuoudX
return (<div>parse("sampleLongText")</div>)

 ⨯ ../node_modules/budoux/module/win.js (19:19) @ window
 ⨯ ReferenceError: window is not defined

どうやらBudouXが内部的にwindowオブジェクトを参照しているようだ

‘use client’を指定するだけでは解決しなかったので面倒になってコンポーネント化した。

他の方法で使えないの？

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

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

Discussion