[Next.js]Next.jsでのSSR実現、SQLite実装方法！[SQLite]

初めに

Next.jsにてサーバーサイドレンダリング（SSR）を実現、SQLiteをデータベースとして活用する方法について紹介します！
この記事では、以下の「nihongo.db」データベースの「nihongo」テーブルの情報を取ってきて、表示する手順を具体的に紹介します！

1. Next.jsプロジェクトの雛形作成

以下のコマンドにてNext.jsプロジェクトをセットアップします！
その後、作成したプロジェクトへ移動します。

npx create-next-app プロフェクト名
cd プロジェクト名

2. SQLiteデータベースとの接続

SQLiteデータベースとの接続を確立するための util/db.js ファイルを作成します！
以下のコードは、nihongo.dbへの接続を確立する openDatabase 関数が定義されています。open メソッドを使用してデータベースへの接続が行われています！

// util/db.js
import sqlite3 from 'sqlite3';
import { open } from 'sqlite';

export async function openDatabase() {
  return open({
    filename: './nihongo.db',
    driver: sqlite3.Database,
  });
}

次に、接続用のAPIエンドポイントを pages/api/db.js に作成します！
このコードは、他の部分でデータベースに接続するためのconnectDatabase 関数を定義しています。

// pages/api/db.js
import { openDatabase } from '../../util/db';

export async function connectDatabase() {
  const db = await openDatabase();
  return db;
}

3. データの取得とSSRの実装

次に、nihongo.dbからデータを取得し、サーバーサイドでページを描画するコードを pages/index.js へ実装します！
以下のgetServerSideProps 関数は、サーバーサイドでのデータ取得を行います。
connectDatabase 関数を使用してSQLiteデータベースに接続し、db.all メソッドを使用してクエリを実行。
取得したデータは props にセットされ、HomePage コンポーネントで表示されます。

// pages/index.js
import React from 'react';
import { connectDatabase } from './api/db';

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Next.js SSR with SQLite</h1>
      <ul>
        {data.map((item) => (
          <li key={item.aiueo}>{item.aiueo}</li>
        ))}
      </ul>
    </div>
  );
};

export async function getServerSideProps() {
  const db = await connectDatabase();
  const data = await db.all('SELECT * FROM nihongo');

  return {
    props: { data },
  };
}

export default HomePage;

まとめ

これで、SQLiteデータベースとの連携が確立され、サーバーサイドでのページ描画が可能になりました。
DBへの接続は重要な要素となってくるため、今回のモノを参考に沢山使用していきましょう！