【年末あるある】自動で更新されるコピーライトの書き方（React / Next.js）

2025-12-31

17 views

【年末あるある】自動で更新されるコピーライトの書き方（React / Next.js）

年末年始になると、「あ、コピーライトの年まだ直してないな…」って思い出すこと、ありませんか？ Webサイトのフッターなどによくあるコピーライト表記ですが、年が変わるたびに手動で書き換えるのは地味に面倒です。更新を忘れて、何年も古いままになっているケースもよく見かけます。そこで今回は、React / Next.js でコピーライトの年を自動更新する方法を紹介します。 ※本記事では React / Next.js 向けの実装例を紹介しますが、考え方自体は他の言語やフレームワークでも応用できます。

仕組みの考え方

ポイントはシンプルです。

・現在の年を new Date().getFullYear() で取得・開始年と比較して　　・同じ年 → 単年表示　　・年が進んでいる → 開始年–現在年の形式で表示これをコンポーネント化しておけば、一度書くだけで、来年以降も放置でOKになります。

実装例（React / Next.js）

TypeScript JSX

// Client Componentで現在の年を取得するため "use client" を指定しています。

"use client";

export default function CopyrightYear({
    start,
}: {
    start: number;
}) {
    const current = new Date().getFullYear();
    return <>{current > start ? `${start} – ${current}` : start}</>;
}

使い方

フッターなどで、開始年を指定して使います。

TypeScript JSX

<footer>
    © <CopyrightYear start={2023} /> Your Site Name
</footer>

表示例

この方法のメリット

年末年始に修正しなくていい
コピペでどのプロジェクトにも使える
表示ミス（更新忘れ）を防げる
コンポーネントなので管理が楽

小さい改善ですが、積み重ねるとかなり楽になります。

まとめ

コピーライトの年は「毎年変わるもの」なので、コードで自動化しておくのが正解です。 React / Next.js を使っているなら、今回のコンポーネントをそのまま使ってみてください。

ゆゆっち

プログラミングやサーバー構築といった技術系の記事を中心に、
ジャンルを横断して楽しめるブログを目指しています。

公式プロフィールを見る