Next.js等でコピーライト等の年数を自動的に更新する方法

今回はNext.jsでブログを作成した際に、コピーライト等の年数を自動的に更新できるようにした際に使用した方法について発信します。
JavaScriptでもほぼ同様の書き方で実装ができるので、JavaScriptで困っている方もぜひ参考にしてみてください！

Next.jsで年数を自動的に更新するコード

ここではfooterのコピーライトの年数を自動更新することを想定しています。

<p className="copyright">
  Copyright &copy; {new Date().getFullYear()} Youtaの雑記ブログ All rights reserved.
</p>

注目して欲しいのは{new Date().getFullYear()}の部分です。

new Date()でDateオブジェクトを生成し、getFullYear()メソッドで現在年数のみを取得してきています。

たったこれだけの記載で、実装できてしまうので便利ですね！

ちなみに、JavaScriptで年数を自動的に更新するコードは以下になります。

まずはHTMLを見てみましょう。

<footer>
  <p>
    Copyright &copy; <span id="now_year"></span> Youtaの雑記ブログ All rights reserved.
  </p>
</footer>

次にJavaScriptです。

document.getElementById("now_year").innerText = new Date().getFullYear();

やっていることはNext.jsの時と同様で、

となります。

ついでにJqueryの場合も見てみましょう。

HTMLはJavaScriptの時と同様で、Jqueryのコードが下記のようになります。

$('#now_year').text() = new Date().getFullYear();

Jqueryを使用した分、素のJavaScriptより短くなりましたね！

以上がNext.js等でコピーライト等の年数を自動的に更新する方法になります。

年数を自動更新したい場合等に利用してみてください！

実装やエラーが解決できない場合

プログラミングの実装やエラーでどうしてもわからない場合はメンターに相談するのが一番です。

考えている、見えている範囲が狭くなり、解決から遠くに行って何時間も、何日も経っていることなんてよくある話です。

そういう時は聞ける先輩や、メンターに相談することが大事です。