MacでNext.jsのGettingStartedを進めてみる (1)

Macで Next.jsの公式Getting Startedを進めてみたメモです。

使用した環境は Intel Mac + Catalinaです。
バックエンドとしてはstrapiを使っていきます。

今回は Getting Started の章をやっていきます。

0. 事前準備

1. Homebrewを使ってyarnとNode.jsをインストールする

   command

   $ brew install yarn node
   

2. 作業用フォルダを作成して移動する

   command

   mkdir -p ~/devel/ && cd $_
   

1. Getting Startedをやってみる

Getting Startedページの内容を、yarnを使って実行します。 この際、TypeScriptを使用するオプションを指定します。

1. 今回は next-sample-app という名前でプロジェクトを作成する

   command

   $ yarn create next-app --typescript next-sample-app
   

   output

   yarn create v1.22.10
   [1/4] 🔍  Resolving packages...
   [2/4] 🚚  Fetching packages...
   [3/4] 🔗  Linking dependencies...
   [4/4] 🔨  Building fresh packages...
   
   ~~~~~~~~ 中略 ~~~~~~~~
   
   We suggest that you begin by typing:
   
     cd next-sample-app
     yarn dev
   
   ✨  Done in 11.03s.
   

2. 生成されたフォルダに移動する

   command

   $ cd $_
   

3. サーバーを起動してみる

   command

   $ yarn dev
   

   output

   yarn run v1.22.10
   $ next dev
   ready - started server on 0.0.0.0:3000, url: http://localhost:3000
   info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
   

4. サーバーが起動したのでブラウザで開いてみる

   command

   $ open http://localhost:3000/
   

   

これで Getting Started のページが完了。
今回はManual Setupではないので、ホームページとしては pages/index.tsx が表示されている。

サーバーは起動したままの状態にしておくこととし、以降の作業は別のターミナルで行う。

[ちょっと寄り道] ホームページを変更してみる

デフォルトで用意されているホームページではなくて、任意の文字列を出力する形に変更してみる。
Getting StartedのManual Setupでは pages/index.js を作成しているが、今回はTypeScriptで作っているので、ファイル名を index.tsx とし、TypeScript版に書き換えた内容で作成する。

1. ホームページである pages/index.tsx を上書きする

   pages/index.tsx

   function HomePage() {
     return <div>Welcome to Next.js!</div>;
   }
   
   export default HomePage;
   

2. ブラウザで開いてみる

   command

   $ open http://localhost:3000/
   

   

ホームページが任意の文字列に変更されました。

次回は Basic Features / Pages を進めていきます。

MacでNext.jsのGettingStartedを進めてみる シリーズの記事

1. Getting Started をやった記事
2. Basic Features / Pages をやった記事
3. Basic Features / Data Fetching をやった記事