ビューワの使用（Next.js）

Next.jsはReactをベースに開発されたフレームワークであり、アプリケーションに対して明確に定義された構造を提供し、最適化によって開発プロセスを高速化します。このチュートリアルでは、帳票ビューワコンポーネントを使用してNext.jsアプリケーションを作成し、単純なレポートを表示します。

Next.jsアプリケーションを作成する

Next.jsアプリケーションを作成する簡単な方法はCLIツールのcreate-next-appを使用することです。

create-next-appを使用するためには事前にNodeJSがコンピュータにインストールされている必要があります。

コマンドプロンプトで次のコマンドを入力して、新しいNext.jsアプリケーションを作成します。

npx create-next-app@latest arjs-nextjs-viewer-app

上記コマンドを実行すると複数のプリセットの選択肢が表示されます。このトピックではデフォルトの選択肢で作成するため、次のように設定します。

Would you like to use TypeScript with this project?……Yes
Would you like to use ESLint with this project?……Yes
Would you like to use Tailwind CSS with this project?……Yes
Would you like to use 'src/' directory with this project?……No
Use App Router (recommended)?……Yes
Would you like to customize the default import alias?……No

作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。

cd arjs-nextjs-viewer-app

次のコマンドを入力してActiveReportsJSのReact対応パッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。

npm install @grapecity/activereports-react @grapecity/activereports-localization

React用の帳票ビューワコンポーネントをNext.jsで機能させるには、componentsというフォルダ（存在しない場合はアプリケーションのルートフォルダに作成）に、ReportViewer.tsxファイルを追加し、以下の内容を設定します。

"use client";
import { Viewer } from "@grapecity/activereports-react";
import { Props as ViewerProps } from "@grapecity/activereports-react";
import "@grapecity/activereports/pdfexport";
import "@grapecity/activereports-localization";
import React from "react";

// レポートビューワのデフォルトのテーマをインポートします。
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";

const ViewerWrapper = (props: ViewerWrapperProps) => {
  const ref = React.useRef<Viewer>(null);
  React.useEffect(() => {
    ref.current?.Viewer.open(props.reportUri);
  }, [props.reportUri]);
  return <Viewer {...props} ref={ref} />;
};
export type ViewerWrapperProps = ViewerProps & { reportUri: string };
export default ViewerWrapper;

Next.jsではクライアントコンポーネントとして使用する際、use clientを宣言する必要があります。

app\page.tsxファイルを開き、その内容を次のように変更します。

import type { NextPage } from "next";
import React from "react";
import { ViewerWrapperProps } from "../components/ReportViewer";

// 動的インポートを使用して、レポートビューワのラッパーをロードします。詳細については、「https://nextjs.org/docs/advanced-features/dynamic-import」を参照してください。
import dynamic from "next/dynamic";
const Viewer = dynamic<ViewerWrapperProps>(
  async () => {
    return (await import("../components/ReportViewer")).default;
  },
  { ssr: false }
);

const Home: NextPage = () => {
  return (
    <div
      style={{ width: "100%", height: "100vh" }}
    >
      <Viewer reportUri="reports/quick-start-sample.rdlx-json" language="ja" />
    </div>
  );
};

export default Home;

ActiveReportsJSはクライアントサイド（ブラウザ上）で動作する帳票ライブラリのため、{ ssr: false }オプションを指定し、SSR（サーバーサイドレンダリング）しないように設定します。

public\reportsディレクトリを作成し、サンプルレポートを作成するで作成したquick-start-sample.rdlx-jsonファイルを配置します。
次のコマンドを入力してNext.jsアプリケーションを実行します。

npm run dev

ブラウザで「localhost:3000」を参照し、アプリケーションを表示します。