Next.js チュートリアルから始める

2020年3月12日

こんにちは、Yuuichi(@WestHillWorker)です。

今回はReactのフレームワークNext.jsでプロジェクト作成からブラウザに表示するところまでやっていきたいと思います。

ブラウザ表示までに数分くらいで、出来てしまうとおもいます。

プロジェクト作成

今回学習用ということで、study_nextフォルダを作成しています。

# 任意のフォルダ名(study_next)
$ mkdir study_next
$ cd study_next
$ npm init -y
$ npm install --save react react-dom next

設定ファイル修正

npm init -yコマンドで作成されたpackage.jsonのファイルを開いて、scriptsの設定を修正します。

package.json

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

npmコマンドで、nextを実行できるようになりました。

表示用ページ作成

このままだと表示するページがないため、404エラーページになってしまうため、pages/index.js作成します。

$ mkdir pages & touch pages/index.js

index.jsに表示する内容を記述します。

export default function Index() {
  return (
    <div>
      <p>Study Next.js</p>
    </div>
  );
}

Next.jsではpages配下のファイル名に基づいてルートが関連つけられますので、今回ルートアクセス時のファイルがindex.jsになります。

例えば、pages/hellow.jsの場合は、/hellowにマッピングされます。

ブラウザ確認

先ほど追加したscriptsでnextを起動するコマンドを実行します。

$ npm run dev
...
[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
[ ready ] compiled successfully - ready on http://localhost:3000

ローカルホストにアクセスして表示確認したら完了です！

まとめ

pages配下のファイル名に基づいてルートが関連付けられるので、パスからすぐどのファイルが表示されているのかわかりやすいと思いました。

公式サイトにも記載があったのですが、世界を牽引する企業でも多く利用されているフレームワークだそうです。

競合フレームワークとしては、Gatsbyというフレームワークがあります。

今回はこの辺で！引き続き、Next.jsは記事にしていこうと思います。