Next.js チュートリアルから始める
2020年9月13日

こんにちは、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は記事にしていこうと思います。
関連記事
Next.js 動的なページを作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は、Li ...
Next.js getInitialPropsでページの非同期処理を学ぶ
こんにちは、Yuuichi(@WestHillWorker)です。 今回は前回作 ...
Next.js Layout作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は共通で ...
Next.js Tailwindcss プロフィールページを作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は、前回 ...
React react-router-dom v5 画面遷移 入門
今回は、react-router-domというライブラリを利用して、Reactで ...