この記事の内容

この記事を読むと，以下の2点について理解できます．

• 著者がサイトを作ろうと思った経緯
• Next.jsの概要

きっかけ

なぜサイトを作ろうと思ったのかという背景がないと，記事の信頼度やバックボーンがなくなってしまうので，簡単に残しておきます．理由は大きく2つあります．

一つ目は，就活のポートフォリオ作りです．今年，著者は大学の制度を利用することで，1年の飛び級に成功しました．そのため，今年(2025年3月)まで学部3年だったにも関わらず，来年度(2025年4月)は修士1年になります．しかし，その犠牲としてたった今から始まる就活対策のための時間を十分に取れず，あわてて作り始めました．その先駆けとして，現在のフロントエンド技術の最前線をひた走るNext.jsに取り組み始めました．

二つ目は，同期との技術力の差を少しでも縮めたいということです．著者の通う大学は周りの環境が非常によいため，周りにはすごい人がわんさかといます．そのため，彼らと技術トークをするときはいつも一歩遅れたところから情報をひたすら享受するのみとなっています．その状況では得られたはずなのにとりこぼしてしまう知識もあるでしょうし，なにより著者から発信する機会が失われてしまいます．正直言って自分よりも技術力がない人を探し出して，その人に対してアウトプットすることで成長することも可能ではあります．しかし，自分がせっかく身を置いているこの最上の環境を生かさない手はないと思い，さらにはそれらに対して進んで取り組んでいきたいと思い，このサイトを立ち上げるに至りました．

以下，このブログではひたすらNext.jsで立ち上げたこのサイトについて述べていきます．書いていく上で，「直感的にわかりやすい」「何をしているかが明確である」点を明確にすることを意識していきます．自分と同じような意思を抱えている人が，少しでも並び立てるようなブログにしていきたいです．

Next.js とは

Next.jsで最低限知っておけばよい事前知識は下記の3個です．

1. Webサイトを作れるフレームワークである
2. WebサイトをJavaScriptだけで作れる
3. Webアプリも頑張れば作れる

少しだけ解説します．

1. Webサイトを作れるフレームワークである

そのままの意味です．「フレームワーク」は英語で「枠組み」という意味合いになります．「Webサイトを作る上で元となったものがあるけど，そのままでは使いにくかったり難しいところがあるから，いい感じにしていたよ」という認識があれば十分です．もう少し詳しく知りたい方はこちらの記事が参考になるかと思います．

1. WebサイトをJavaScriptだけで作れる

Webサイトを作る上で，本当は「HTML」「CSS」「JavaScript」の3言語が必要となります(プログラミング言語とは言ってない)．そこで，「全部JavaScriptで書けるようにしてしまえ」という発想のもと生まれたのがNext.jsです．そのため，Next.jsで作られたWebサイトは，その9割がJavaScriptのファイルのみで構成されます．

なお，JavaScriptの代わりにTypeScriptが使われることがありますが，親戚なので文法もほぼ同じです．JavaScriptは「動的型付け」，TypeScriptは「静的型付け」なので，TypeScriptの方が望ましくはあります．

1. Webアプリも頑張れば作れる

WebアプリとWebサイトの境目ってどこにあるんですかね．Webサイト自体が非常にリッチになってしまったため，その境界が曖昧としていますが，以下のような違いがあるとされています．

種類	目的	操作量	コンテンツ
Webアプリ	ユーザからの操作やデータ管理	多い	動的(ex.動画視聴，メールアプリ)
Webサイト	ユーザへの情報提供	少ない	静的(ex.ニュース，ブログ)

ここで伝えたいことは，「動的なコンテンツも作れる」ことです．しかし，これは言い換えれば「データベースとの連携が必須」ということでもあります．そのため，一般的なWebサイトの作成に比べ，その難易度は一段階上がると言えるでしょう．

ここまではかなり雑なまとめとなっているので，以下にもう少し詳しく載せています．

<details> <summary>Next.jsの詳細</summary> Next.jsとは，Reactを基盤としたJavaScriptフレームワークです(Reactは単なるライブラリですが，先述の通り，Next.jsはそれを使いやすくカスタマイズしているといったイメージです)．すごいところは，クライアントサイドとサーバーサイドの両方で開発が可能なフルスタックフレームワークであるところです．これにより，開発者はアプリケーションの構成を柔軟に処理できます．例えば，サーバ側でデータを処理しつつクライアント側でUIを最適化することができます．このようにReactの機能を拡張することで，開発者が効率的に高性能なWebアプリケーションを構築できるように設計されています．これがWebアプリも作ることができる所以となっています． </details>

次回からは，Next.jsの注意点と始め方についてみていきます．

ご愛読ありがとうございました！