Next.jsでWebサイトを作る入門ガイド

どうも、きこにいだよ。

最近、俺の周りで「きこにいさんのTikTok見てWebサイト作ってみたくなりました！」とか「どうやってサイト作ってるんですか？」って聞かれることが増えたんだよね。俺もね、昔は年商1.6億とかあったのに、そこから2億の負債抱えて自己破産、うつ病まで経験してさ。どん底から這い上がって、今こうして株式会社終焉祝祭の代表として、TikTokでみんなと繋がってる。そして、コミュニティ「アジト」も運営してる。

俺がどん底にいた時、本当に何もなかった。でも、何かを表現したい、誰かと繋がりたいっていう気持ちだけは消えなかったんだよね。それで、いろんなツールを触り始めた中で、やっぱりWebサイトってのは自分の「城」みたいなもんだなって改めて思ったんだ。

今日は、そんな俺が「今からWebサイト作るならこれだろ！」って推してるNext.jsについて、みんなにも分かりやすく入門ガイドとして紹介していくよ。難しい話は抜きにして、なぜNext.jsがいいのか、どうやって始めるのか、俺の体験も交えながら話していくから、最後まで読んでみてくれよな。

Next.jsって何だよ？

まず最初に、「Next.jsって何だよ、美味いのか？」って思う人もいるかもしれない。簡単に言うと、Next.jsは「React」っていうJavaScriptのライブラリをベースにした、Webサイトを作るためのフレームワークなんだ。

「フレームワーク」って聞くと難しそうだけど、例えるなら、カレーを作る時にルーと具材が全部セットになってる「カレールー」みたいなもんだ。ゼロからスパイスを調合して、玉ねぎを炒めてってやるより、カレールーを使えば誰でも美味しいカレーが簡単に作れるだろ？Next.jsもそんな感じで、Webサイトを作るのに必要なあれこれが最初から揃ってるから、初心者でも効率的に、しかも結構本格的なサイトが作れちゃうんだ。

俺も昔、初めて自分のビジネスのサイトを作った時は、HTMLとCSSをひたすら手打ちして、JavaScriptも少しだけ触ってって感じで、めちゃくちゃ時間かかったんだ。それこそ、最初のサイト立ち上げに1ヶ月くらいかかって、その間に「この機能、どうやって実装するんだ？」って壁にぶち当たって、何度も心が折れそうになった。でもNext.jsなら、もっとサクサクっと作れるから、挫折しにくいと思うぜ。

なんでNext.jsがいいんだ？（きこにい的メリット）

俺がNext.jsを推すのには、いくつか理由があるんだ。これは俺が実際にビジネスで使ってみて、「あ、これマジで使えるな」って思った点だから、参考にしてくれ。

1. 爆速でページが表示される

これ、マジで大事。俺もTikTokで配信してるけど、みんなの集中力って短いだろ？Webサイトも同じで、表示が遅いとすぐに閉じられちゃうんだ。「ページの読み込みに3秒以上かかると、ユーザーの53%が離脱する」っていうデータもあるくらいだ。

Next.jsは、事前にページを生成しておいたり（SSG: Static Site Generation）、リクエストがあった時に生成したり（SSR: Server Side Rendering）っていう機能があるんだ。これによって、ユーザーがサイトにアクセスした時に、めちゃくちゃ早くページが表示されるんだよ。俺のコミュニティ「アジト」のサイトもNext.jsで作ってるんだけど、この表示速度の恩恵はデカいね。みんなもストレスなく情報にアクセスできるから、エンゲージメントも高まるってわけだ。

2. SEOに強い

SEO（検索エンジン最適化）って知ってるか？GoogleとかYahoo!で検索した時に、自分のサイトが上位に表示されるようにする対策のことだ。これがしっかりできてないと、せっかく作ったサイトも誰にも見つけてもらえないってことになっちまう。

Next.jsは、ページが事前に生成されるおかげで、Googleのクローラー（サイトを巡回して情報を集めるプログラム）が内容を読み込みやすいんだ。JavaScriptだけで作られたサイトだと、クローラーがうまく内容を読み込めなくて、SEO的に不利になることがあるんだけど、Next.jsならその心配が少ない。俺もね、自己破産してどん底にいた時、検索で情報を探すことが多かったから、自分が発信する側になった時も、いかに見つけてもらうかっていうのはめちゃくちゃ意識してる。

3. 開発効率が半端ない

これはエンジニアじゃなくても恩恵がある話だ。Next.jsは、コンポーネントっていう部品を組み合わせてサイトを作っていくんだ。例えば、ヘッダーとかフッターとか、ボタンとかさ。一度作った部品は、他のページでも使い回せるから、同じものを何度も作る手間が省けるんだよ。

俺もね、昔はコードをコピペしまくって、ちょっと変更するたびに全部のページを修正しなきゃいけなくて、マジでイライラしたもんだ。でもNext.jsなら、例えばデザインを変えたいってなった時も、その部品だけ修正すれば、使ってる全ての箇所に反映される。これによって、開発にかかる時間もコストも大幅に削減できるんだ。俺みたいにスピードを重視する経営者にとっては、これはめちゃくちゃ魅力的なポイントだね。

4. 豊富な機能が最初から揃ってる

ルーティング（URLの管理）とか、API Route（サーバー側の処理）とか、画像最適化とか、Next.jsにはWebサイトに必要な機能が最初からたくさん用意されてるんだ。これらを自分でゼロから実装しようとすると、それだけで何週間、何ヶ月もかかっちまう。

俺も株式会社終焉祝祭を立ち上げてから、いろんなサービスを展開していく中で、新しい機能を追加したり、既存の機能を改善したりすることが頻繁にある。そんな時でも、Next.jsの豊富な機能のおかげで、スムーズに開発を進められてるんだ。自己破産からの再起って、とにかくスピード感が命だからね。

どうやって始めるんだ？（超入門編）

「きこにいさん、いいのは分かったけど、俺みたいな素人でもできるのかよ？」って思っただろ？大丈夫、俺だって最初は素人だったんだ。やる気さえあれば、誰でもできる。

1. 準備するもの

• Node.js: これはJavaScriptをパソコンで動かすために必要なものだ。公式サイトからダウンロードしてインストールしておこう。
• テキストエディタ: コードを書くためのソフトだ。VS Code（Visual Studio Code）っていうのが無料で使えて、めちゃくちゃ便利だからおすすめだ。

2. プロジェクトの作成

準備ができたら、コマンドプロンプト（Windows）かターミナル（Mac）を開いて、以下のコマンドを打ち込んでみてくれ。

npx create-next-app my-next-app

my-next-appの部分は、作りたいサイトの名前に変えてもいいぞ。このコマンドを打ち込むと、いくつか質問されるから、基本的にEnterキーを押してデフォルトの選択で進めて大丈夫だ。TypeScriptとかESLintとか聞かれるけど、最初は気にしなくていい。

3. 開発サーバーの起動

プロジェクトが作成されたら、そのプロジェクトのフォルダに移動して、以下のコマンドを打ち込む。

cd my-next-app
npm run dev

これで、開発サーバーが起動するはずだ。「http://localhost:3000」って表示されたら、そのURLをブラウザで開いてみてくれ。Next.jsの初期ページが表示されたら成功だ！

4. コードをいじってみよう

プロジェクトフォルダの中にあるpagesフォルダを見てみよう。その中のindex.jsファイルが、トップページの内容を書いてるファイルだ。このファイルをVS Codeで開いて、書いてある文字を適当に変えて保存してみてくれ。ブラウザを更新しなくても、自動的に変更が反映されるはずだ。これがNext.jsのホットリロードっていう便利な機能だ。

俺もね、初めてコードをいじって、ブラウザに自分の書いた文字が表示された時は、めちゃくちゃ感動したんだ。年商1.6億から2億の負債を抱えて、何もかも失ったけど、自分の手で何かを作り出せる喜びっていうのは、本当に大きい。

まとめ

今日はNext.jsの入門ガイドとして、俺の体験も交えながら、なぜNext.jsがいいのか、どうやって始めるのかを話してきた。

• Next.jsはReactベースのフレームワークで、効率的にWebサイトが作れる。
• 表示速度が速い、SEOに強い、開発効率が良い、機能が豊富といったメリットがある。
• Node.jsとVS Codeがあれば、コマンド一つで簡単に始められる。

自己破産して、うつ病になって、本当にどん底を経験した俺だからこそ言えるんだけど、何か新しいことを始めるってのは、めちゃくちゃ勇気がいることだ。でも、その一歩を踏み出すことで、新しい世界が開けることもある。俺はTikTokで再起を図り、株式会社終焉祝祭を立ち上げ、コミュニティ「アジト」を運営している。これも全て、諦めずに新しいことに挑戦し続けた結果だ。

Webサイト作りも同じだ。最初は難しいと感じるかもしれないけど、一歩ずつ進んでいけば、必ず自分の「城」を築き上げることができる。もし何か困ったことがあれば、俺のコミュニティ「アジト」で質問してくれてもいいし、TikTokのDMでもいい。

さあ、今日から君もNext.jsで、自分だけのWebサイトを作ってみないか？
俺と一緒に、新しい未来を創っていこうぜ。

じゃあな！