先生と生徒の会話形式で理解しよう

生徒

「Next.jsを勉強し始めたんですが、libフォルダって何に使うんですか？」

先生

「libフォルダは、アプリの中で使う大事な処理をまとめて置く場所です。」

生徒

「pagesやappとは何が違うんですか？」

先生

「画面とは直接関係しない裏方の仕事を担当するのがlibフォルダなんですよ。」

1. Next.jsのlibフォルダとは何か？

Next.jsのlibフォルダは、画面表示以外の処理をまとめて管理するための場所です。たとえば、計算処理、データの加工、共通で使う関数などを入れます。学校で例えるなら、教室がpagesやappで、職員室がlibフォルダです。表には出ないけれど、全体を支える大切な役割を持っています。

2. なぜlibフォルダでロジックを整理するのか

プログラムをそのまま書き続けると、どこに何があるのか分からなくなります。 libフォルダに処理を分けると、コードが読みやすくなり、修正もしやすくなります。初心者のうちから整理する癖をつけると、後でとても楽になります。

libフォルダは、自分で作るフォルダです。プロジェクトの一番上にlibという名前のフォルダを作ります。中には役割ごとにファイルを分けて置きます。


export function add(a, b) {
  return a + b;
}

（足し算をするだけのシンプルな処理を、libフォルダにまとめています）

libフォルダに置いた処理は、画面を作るファイルから呼び出して使います。これにより、同じ処理を何度も書かずに済みます。


import { add } from "../lib/math";

export default function Page() {
  const result = add(2, 3);
  return <h1>結果は {result} です</h1>;
}

（画面に「結果は5です」と表示されます）

データを整える処理もlibフォルダに向いています。表示前に文字を変換したり、必要な形に直したりできます。


export function formatName(name) {
  return "こんにちは、" + name + "さん";
}


import { formatName } from "../lib/format";

export default function Page() {
  return <p>{formatName("太郎")}</p>;
}

（画面に「こんにちは、太郎さん」と表示されます）

componentsは画面の部品を置く場所です。 libは画面に直接出ない処理を置きます。役割で分けることで、迷わず探せる構成になります。

すべてをlibに入れすぎると、逆に分かりにくくなります。表示に関係するものはcomponents、処理だけのものはlibと意識しましょう。名前も分かりやすく付けることが大切です。

libフォルダを使うと、コードが整理され、読みやすくなります。チーム開発でも理解しやすく、修正の時間も減ります。初心者でも、全体の流れをつかみやすくなるのが大きなメリットです。