どうも、まさとらん（@0310lan）です！
今回は、Next.jsを利用して開発したWebサイトやアプリを、Netlifyで簡単にホスティングできる機能をご紹介します。
CLIツールも提供されていますが、本記事ではすべてブラウザ上で完結できるエディタを利用します。誰でも簡単にNext.jsアプリを公開できるので、ご興味ある方はぜひ参考にしてください！
■Next.jsのデモアプリを作ってみよう！
それでは、Next.jsアプリを実際に公開してみましょう。
と言っても、面倒な初期設定や開発環境などは一切不要です。誰でも気軽にNext.jsを体験できるスターターテンプレートが提供されているので、これを使ってみます。
「Next.js on Netlify」のサイトにアクセスしたら、下方向へ画面をスクロールして、好きなテンプレートを選択してください。
（※今回はブログのテンプレートを選んでみました）
GitHubと接続する画面が表示されるので、ボタンをクリックします。
GitHubアカウントで連携をしましょう。
最後に、デプロイボタンをクリックすれば準備OKです！
少し待ってからブラウザを更新すると、公開用のURLが緑色になるのでクリックします。
これで、Next.jsを使ったブログサイトが公開されました。
URLの文字列は好きな英数字に変更できますし、独自ドメインをお持ちであれば無料で適用することも可能です。
また、この時点でリポジトリも自動的に生成されているので、自分のGitHubアカウントからアクセスしてみましょう。
ローカル開発環境をお持ちであれば、各種ファイルを好きなように変更して、ブログをカスタマイズできます。
開発環境がなければ、【Code】アイコンをクリックして「Codespaces」を起動してみましょう。
オンラインエディタでファイルを編集して、ブログをカスタマイズできます（ターミナルからコマンドも実行可能）。
NetlifyとGitHubアカウントはすでに連携しているので、ファイルを変更してcommitすれば、自動的にNetlifyが検出して、最新版に更新してくれます。
■任意のリポジトリをNetlifyでホスティング！
今度はテンプレートを使うのではなく、すでにリポジトリがある場合の手順を見ていきましょう！
まずは、Next.jsを利用したリポジトリを用意してください。
次に、Netlifyのダッシュボード画面から【Sites】タブを選択して、【Add new site】ボタンをクリックします。
いくつか項目が表示されるので、「Import an existing project」を選択してください。
GitHubアカウントと接続しましょう。
自分のリポジトリを選択できるようになるので、Next.jsを利用したものをクリックしてください。
デプロイ用の設定画面が表示されます。
Next.jsを利用したリポジトリの場合は、Netlifyが自動で検出して、各種設定まで行ってくれます。
そのため、基本的には何もいじる必要はなく、そのまま【Deploy Site】ボタンをクリックするだけで大丈夫です。
少し待つと専用のURLが緑色に変わるので、リンクをクリックしてみましょう。
これでNext.jsアプリが公開されました！
さきほどと同じように、独自ドメインを適用したり、リポジトリのファイルを編集したり、カスタマイズも自由自在です。
ファイルを編集すると、もちろん自動で検出されるので、公開されたNext.jsアプリも最新版に変わります。
スマホでできる謎解きゲーム『IT謎解き2』を公開！
『IT謎解き』の第二弾となる『IT謎解き2』は、全問paiza完全オリジナルの謎解きゲームです。
IT謎解きは、IT業界で活躍するために必要となる発想力・推理力・分析力・耐久力などを問う新感覚謎解きです。今回は、「ゲーム世界からの脱出」というテーマでIT業界力・IT知識を問う謎を出題しています。
みなさんのITに関する知識、分析力や論理的思考力などを駆使して、ぜひチャレンジしてみてください。
詳しくはこちら
■まとめ
今回は、Next.jsアプリを簡単にNetlifyで公開できる機能についてご紹介しました。
類似のホスティングサービスよりも直感的でシンプルなので、ほとんど迷うことなく公開できるのが大きな魅力だと思います。Next.jsの便利な機能もそのまま使えるので、ちょっとした個人開発のWebアプリを公開するのに最適だと感じました。
ぜひみなさんも、オリジナルのWebアプリを作って公開してみてください！
ちなみに「JavaScriptに入門！」という方は、paizaラーニングの動画講座「JavaScript体験編」「JavaScript入門編」がオススメです。ブラウザ上でコードを書いて実行できるため、すぐに学習をスタートできます。
＜参考リンク＞
・「Next.js on Netlify」公式サイト
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
