Next.jsでサクッと作る。高スペックのWebサイト
自分だけのサイトを公開してみたい。
note？Blog？なんだかプラットフォームは縛りが多いし、もっと自由にやりたいことがある。TwitterやInstagramを使うのも面倒だし、なんだかやりたいことと違うんだ。
そんなアナタにオススメしたいのが、Next.jsを使った高スペックサイト構築。
Next.jsってなに？って方の為にカンタンに説明します。Next.jsとは簡単かつ高速なサイト構築をすることができるフレームワーク。嘘かと思うかもしれませんが、Next.jsを使いこなすことができれば1万ページ以上コンテンツがあるサイトも数分で構築することもできます。実際に私もそんなサイトを運営しています。
さぁ、前書きはこの辺にして、さっさと始めてみましょう！
目次
- 1. Next.jsでのサイト作成はわずか1行で
- 2. Next.jsの運用イメージ
- 3. Node.js / npm のインストール
- 4. VSCodeのインストール
- 5. Next.jsで最初のページをセットアップ
- 6. GitHubでコードを公開
1.Next.jsでのサイト作成はわずか1行で
> npx create-next-app
なんだこりゃ、どうすりゃいいんだよ！と思う方もいるかもしれませんが、しっかりあとから説明するのでご安心ください。
ここで伝えたいことは、Next.jsではこのコードを実行するだけで、サイトが構築できるということ。さらに、Vercelというサイトで数クリックするだけでWebサイトとして公開可能なのです。
とはいえ、実際に自分のサイトを作るには、コードを書く必要があります。
この記事では、自分で作ったコンテンツや、Twitterアカウントの宣伝、アプリの宣伝など、色々なコンテンツを埋め込んでサイトを作成することを目指していきます。
2.Next.jsの運用イメージ
専門用語がいっぱい出てましたね。でも、それぞれの工程で必ずすることは1行程度のコードを書くことだけ。焦らず1つずつ理解していきましょう。
まずは、Node.js / npmのインストールです。
Node.jsとは、Next.jsを動かすために必要な土台となるプログラムのことです。Node.js錠ではさまざまなプログラムを動かすことができます。Next.jsも数あるNode.js用のプログラムの1つと考えてみましょう。この時点ではそれでまったく問題ありません。
さらに、npmというパッケージ管理システムを使用します。npmはNode.jsに付属しているプログラムの1つ。何をするかというと、Node.jsで使用するプログラムをインストールしたり、アンインストールしたりするのに使います。
例えば、npmを使ってTestというプログラムをインストールするときにはこんな感じで実行します。
npm install Test
アンインストールするときは、以下のように実行します。
npm uninstall Test
ね、カンタンでしょ？ 要するに、1行でインストールして、1行でアンインストールしたい。それだけです。
Node.jsのインストールが終わったら、Next.jsを使いながらコードを変更します。コードを変更しなくても実はサイトは公開できるので、「とりあえず公開してみてみたい」という方は、このステップを飛ばしても大丈夫。
その後、GitHubにコードをアップロードします。また専門用語が出てきましたが焦る必要はありません。GitHubとはコードを管理する場所のこと。例えば、自分のPCが壊れてしまったら、PCにあるコードはなくなってしまいますよね。GitHubにコードをアップロードしておくと、そのようなことを防ぐことができます。また、昨日までうまく動いていたコードが、今日自分が変更を加えたことでうまく動かなくなってしまった。そんなとき、GitHubに定期的にコードを保存していれば、動いていた時のコードを復旧することができます。それ以外にもチームでのコード管理に便利だったりするのですが、まずはここまでのことを頭に入れてもらえたら十分です。
最後に、Vercelにコードをアップロードしてサイトを公開します。Vercelとは、Next.jsを開発している会社のこと。先ほど説明したGitHubと連携することで、最新のコードをサイトに変換して公開することができます。
長い説明を読んでくれて、ありがとうございました！
専門用語がたくさんでてきましたが、流れはとてもカンタンです。
さっそくNode.jsのインストールからはじめていきましょう！
Node.js / npm のインストール
- Node.js / npm のインストールページ
- ダウンロード | Node.js
まずは、👆のページからNode.jsをダウンロードしましょう。
自分でNode.jsのインストールについて調べてみると、nodebrewなど様々なNode.jsのバージョンを管理できるツールを使った方がいいとかいう情報が出てきますが、この時点でそういうことを気にする必要はありません。実際にそういったツールが必要になった時に調べればそれで良いです。何はともあれインストールを進めましょう。
すでにNode.jsのインストールについては、各OS毎に詳しいページがあるので、そちらを参照してみてください。ほぼクリックだけでインストールできるので、ご安心くださいね。
- Windows : Node.jsをインストールする - Qiita
- Mac : Node.jsの開発環境を用意しよう！（macOS） | プログラミングの入門なら基礎から学べるProgate[プロゲート]
ここまで上手くいったら、MacならTerminal、Windowsならコマンドプロンプトを起動して、nodeのインストールに成功しているか試してみましょう。
node -v
npm -v
👆をそれぞれ実行してみましょう。1行ずつでかまいません。すると、node, npmのバージョンが表示されます。v16.13.1のように記載されれば成功です。バージョンの数字は違うかもしれませんが、ちゃんと表示さえされていれば大丈夫。node.jsとnpmは別のプログラムなので、バージョンは違ってももちろん大丈夫ですよ。気にせず進めてみましょう。
4. VSCodeのセットアップ
このステップは、すでにVSCodeをインストールしている方や、コマンドラインの操作になれている人は必要ありません。しかし、コマンドラインの操作になれていない方はオススメ。ぜひチャレンジしてみてください。
そもそもVSCodeとは、Microsoftが開発しているプログラミング用テキストエディタ。これを使うことで、コードを書くときに自動でコードが補正されたりする便利な機能を使いながら、ラクにコードを書くことができるようになります。
👆ここからインストールしてみてください。
VSCodeを起動して、ファイル → フォルダを開く から、Next.jsのプロジェクトを保存したいフォルダを選んで開いたら終了です。
5. Next.jsのセットアップ
VSCodeをインストールしている方は、ターミナル → 新しいターミナル から新しいターミナルを開きましょう。それ以外の方はTerminal / cmd を起動してください。
npx create-next-app myapp
と入力してみましょう。このコマンドは、myappというNext.jsのプロジェクトを作ってね。という意味です。すると、OK to Proceed?(進めても構いませんか？)ときかれるので、Yを入力すると、Next.jsのプロジェクトが作成されます。
プロジェクトは'myapp'というフォルダ上に作成されているので、VSCode → フォルダを開く からmyappフォルダを開いてみましょう。
npm run dev
新しいターミナルを起動して、👆のコマンドを入力します。これはnpmを使ってdebugモードでアプリを走らせてね。という意味で、先ほど作成されたNext.jsのアプリが起動されます。ターミナルにlocalhost:3000という文字が表示されているハズなので、WindowsならCtrl、MacならCommandを押しながら、localhost:3000をクリックするとブラウザで開くことができます。
こんな感じでアプリが表示されていれば成功です！おめでとうございます🎉
pagesフォルダの中にindex.jsが作成されており、その内容がlocalhost:3000で公開されています。
せっかくなので、ちょっとだけコードをいじってみましょう。index.jsを開いて以下のコードを見つけて変更してみましょう。
<h1 className={styles.title}>
Welcome to <a href='https://next.js.org'>Next.js!</a>
</h1>
--- 👆のコードを 👇に変更 ---
<h1 className={styles.title}>
こんにちは <a href='https://next.js.org'>ペンギンワールドへ!</a>
</h1>
ブラウザを更新して、表示が切り替われば成功です。
ただし、localhostは自分のネットワーク上でしか公開されていない状態です。そのため、まずはGitHubにコードをアップロードして、さらにVercelからGitHubにアクセスしてファイルを公開していきましょう。
Copyright © 2022 Hagakun. All Rights Reserved.