Next.jsのutilsフォルダで共通処理をまとめる方法を完全ガイド！初心者でもわかるNext.jsのディレクトリ構成
生徒
「Next.jsのプロジェクトを見ていたら、utilsっていうフォルダをよく見かけるんですが、何を入れる場所なんですか？」
先生
「utilsフォルダは、いろいろな場所で使い回したい共通の処理をまとめるための場所です。」
生徒
「共通の処理って、具体的にはどんなものですか？」
先生
「日付の変換や文字の整形、計算処理など、何度も使う便利な処理ですね。では、実際にどんなふうに使うのか見ていきましょう。」
1. Next.jsのutilsフォルダとは何か
Next.jsのutilsフォルダとは、アプリ全体で使う共通処理をまとめて置くためのフォルダです。Next.jsでは、pagesやapp、componentsといった決まった役割のフォルダがありますが、utilsは「便利道具箱」のような存在だと考えると分かりやすいです。
たとえば、毎回同じ計算をしたり、同じ形式に文字を整えたりする処理を、あちこちに書いてしまうと修正が大変になります。utilsフォルダにまとめておけば、一か所を直すだけで全体に反映されます。
2. utilsフォルダを作る基本的な場所
utilsフォルダは、プロジェクトのルートディレクトリ、またはsrcフォルダの中に作るのが一般的です。ディレクトリ構成としては、src/utilsのような形がよく使われます。
フォルダは「書類をまとめる引き出し」のようなものです。同じ種類の処理をまとめることで、どこに何があるのかが分かりやすくなり、初心者でも迷いにくくなります。
3. 文字を整える共通処理をutilsにまとめる例
まずは、とてもシンプルな例として、文字を整える処理をutilsフォルダにまとめてみます。名前を受け取って「さん」を付けるだけの処理でも、共通化する意味があります。
export function formatName(name) {
return name + "さん";
}
このような関数をutilsに置いておくと、どのページやコンポーネントからでも同じルールで名前を表示できます。
4. utilsの関数をNext.jsのページで使う方法
utilsに作った処理は、importを使って読み込みます。これは「別の引き出しから道具を取り出す」イメージです。
import { formatName } from "../utils/formatName";
export default function Home() {
const userName = formatName("太郎");
return <h1>{userName}</h1>;
}
5. 日付を扱う処理をutilsにまとめる理由
日付の表示は、アプリ全体で同じ形式にしたいことが多いです。たとえば「2026年1月1日」のように表示する場合、そのルールをutilsにまとめると管理が楽になります。
export function formatDate(date) {
const d = new Date(date);
return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`;
}
このようにしておくと、表示形式を変えたいときもutilsの中だけを修正すれば済みます。
6. 計算処理をutilsにまとめるメリット
計算処理もutilsフォルダと相性が良いです。たとえば、税込価格を計算する処理を考えてみましょう。同じ計算を何度も書くより、一つにまとめた方が安全です。
export function calcTaxPrice(price) {
return Math.floor(price * 1.1);
}
計算のルールが変わった場合でも、utilsの関数を直すだけで全体が最新の状態になります。
7. utilsフォルダを使うときの注意点
utilsフォルダはとても便利ですが、何でも入れすぎると逆に分かりにくくなります。「どこからでも使える純粋な処理」だけを入れるのがポイントです。
画面表示に強く依存する処理や、特定のページ専用の処理は、componentsやpages側に置いた方が整理しやすくなります。
8. 初心者がutilsを使いこなすための考え方
初心者のうちは、「同じことを二回書いたらutilsにできないか？」と考える習慣をつけるのがおすすめです。これはプログラミング全体でとても大切な考え方です。
Next.jsのutilsフォルダを上手に使えるようになると、コードが整理され、読みやすくなり、後から見返したときも理解しやすくなります。
