React を使ってみたいと思っていたところ友人のフロントエンドエンジニアに Next.js のチュートリアルが良いと薦めていただいたので試してみたが、その体験がとても良かったので記録に残します。

React を学びたいなら Next.js チュートリアルがおすすめ。

<p>React を使ってみたいと思っていたところマイフレンドフロントエンドエンジニアに Next.js のチュートリアルが良いと薦めていただいたので試してみたが、その体験がとても良かったので記録に残します。</p>
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#react-%E3%81%A8-nextjs">React と Next.js</a></li>
<li><a href="#nextjs-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB">Next.js チュートリアル</a>
<ol>
<li><a href="#%E5%9F%BA%E7%A4%8Efoundations">基礎（FOUNDATIONS）</a></li>
<li><a href="#%E6%9C%80%E5%88%9D%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8Bcreate-your-first-app">最初のアプリを作成する（CREATE YOUR FIRST APP）</a></li>
</ol>
</li>
<li><a href="#%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%8B%E3%82%89%E5%BE%97%E3%82%89%E3%82%8C%E3%82%8B%E3%81%93%E3%81%A8">チュートリアルから得られること</a></li>
<li><a href="#%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%92%E9%80%9A%E3%81%97%E3%81%A6%E3%81%AE%E5%AD%A6%E3%81%B3%E3%81%A8%E6%88%90%E6%9E%9C%E7%89%A9">チュートリアルを通しての学びと成果物</a>
<ol>
<li><a href="#%E5%9F%BA%E7%A4%8Efoundations-1">基礎（FOUNDATIONS）</a></li>
<li><a href="#%E6%9C%80%E5%88%9D%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8Bcreate-your-first-app-1">最初のアプリを作成する（CREATE YOUR FIRST APP）</a></li>
</ol>
</li>
</ol>
<h2 id="react-と-nextjs">React と Next.js</h2>
<p>React（React.js, ReactJS）は、ユーザーインターフェースを構築するための JavaScript ライブラリ。<br>
<a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">https://reactjs.org/</a></p>
<p>Next.js は、React のフレームワーク。<br>
<a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">https://nextjs.org/</a></p>
<p>つまり React と Next.js は、「Vue.js と Nuxt」のように、「React と Next.js」という関係。</p>
<h2 id="nextjs-チュートリアル">Next.js チュートリアル</h2>
<p>Next.js のチュートリアルは以下のページになります。</p>
<p>Next.js Foundations コース<br>
<a href="https://nextjs.org/learn/foundations/about-nextjs" rel="noopener noreferrer" target="_blank">https://nextjs.org/learn/foundations/about-nextjs</a></p>
<p>「FOUNDATIONS」と「CREATE YOUR FIRST APP」が Next.js Foundations コースの領域です。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/241/Gf46fRJO9563Gqu2uBo0.png" width="800" height="553" alt="Next.js Introduction ページ"></div>
<p>目次としてはこんな感じ</p>
<dl>
<dt>基礎（FOUNDATIONS）</dt>
<dd>
<ol>
<li>Next.js について</li>
<li>Next.js とは？</li>
<li>JavaScript から React へ</li>
<li>React から Next.js へ</li>
<li>Next.js のしくみ</li>
</ol>
</dd>
</dl>
<dl>
<dt>最初のアプリを作成する（CREATE YOUR FIRST APP）</dt>
<dd>
<ol>
<li>Next.js アプリを作成する</li>
<li>ページ間を移動する</li>
<li>アセット、メタデータ、CSS</li>
<li>事前レンダリングとデータ取得</li>
<li>動的ルート</li>
<li>API ルート</li>
<li>Next.js アプリのデプロイ</li>
</ol>
</dd>
</dl>
<p>最初に基礎を学んだ後に、実際に Next.js アプリケーションを作成していく流れです。</p>
<p>「基礎」といっても全てが読みものだけじゃなくて実際に手を動かすので飽きずに進められます。（といっても、1 つ 1 つのセクションは数分で読み終わる程度なので短いです。）</p>
<h3 id="基礎foundations">基礎（FOUNDATIONS）</h3>
<p>基礎章では、React とは何か、Next とは何か。どう動作するのか。といったことを学びます。</p>
<p>DOM がどうとかレンダリングがどうとかみたいなところも解説がありつつ、百聞は一見に如かず方式が取られていて実際に手を動かしながら学んでいきます。</p>
<ol>
<li>簡単に JavaScript で書く</li>
<li>似たようなことを今度は React で書く</li>
<li>さらに今度は Next で書く（厳密には移行させていく）</li>
</ol>
<p>といった段階が踏まれており、</p>
<p>「フレームワークのチュートリアルだから、言語とライブラリは知っている前提でいきますのでよろ。」</p>
<p>みたいな、よくあるフレームワークのチュートリアルとは一線を介するわかりやすさがありました。</p>
<h3 id="最初のアプリを作成するcreate-your-first-app">最初のアプリを作成する（CREATE YOUR FIRST APP）</h3>
<p>この章では、実際に Next.js を使ってアプリケーションを構築していきます。</p>
<ol>
<li>環境構築</li>
<li>アプリケーション開発</li>
<li>デプロイ</li>
</ol>
<p>と、アプリケーション開発の初めから終わりまでをカバーしていて、このチュートリアルが終わった時には達成感を得られるくらいの成果物が出来上がります。</p>
<h2 id="チュートリアルから得られること">チュートリアルから得られること</h2>
<p>フレームワークを学ぶということは、ベースになっている言語やライブラリをある程度知っている必要がありますよね。</p>
<p>だから「React に触れてみたい」が動機の私も漏れなく</p>
<p>「いきなりフレームワークのチュートリアルなんて、初学者にはつらみしかないだろう。」</p>
<p>と思っていたのですが、</p>
<p>実際はそうではなかった。</p>
<p>Next.js のチュートリアルを一通りやってみた結果、初学者の私でもきちんとゴールまでたどり着けました。</p>
<p>あらゆる基礎知識や思想、React, Next の機能もそうですが、チュートリアルで全てを網羅できるわけではありませんし、これだけで完全理解となるわけではありませんが、何より 1 つの完成形（アプリケーションを作るということ）までたどり着けることで、「できるかも」という自信につながります。</p>
<p>つまり、ネクストステップへのモチベーションが生まれるわけですね。</p>
<p>成功体験が生み出すマジックはやはり素晴らしいと感じました。</p>
<h2 id="チュートリアルを通しての学びと成果物">チュートリアルを通しての学びと成果物</h2>
<p>では実際に、チュートリアルを進めたら実際にどんな成果物が生まれたかを紹介します。</p>
<h3 id="基礎foundations-1">基礎（FOUNDATIONS）</h3>
<p>基礎編では、最終的に Next.js を使った簡単な画面を作るのですが、以下のような「いいねボタン」を作成して React, Next.js の動作を学ぶことができます。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/241/dGpPDPz0t5IiacOn4QvO.png" width="800" height="422" alt="いいねボタンの実装画面"></div>
<p>実際の画面・動作はこちらから確認できます。<br>
<a href="https://202208-next-js-tutorial-foundations.vercel.app/" rel="noopener noreferrer" target="_blank">https://202208-next-js-tutorial-foundations.vercel.app/</a></p>
<h3 id="最初のアプリを作成するcreate-your-first-app-1">最初のアプリを作成する（CREATE YOUR FIRST APP）</h3>
<p>基礎章が終わったので次は実際のアプリケーションを作成していくわけですが、ここからが秀逸でした。</p>
<h4 id="いきなり-nextjs-を使わない世界線が存在する">いきなり Next.js を使わない世界線が存在する</h4>
<p>実はこの章の冒頭セクションにこんな一文があります。</p>
<blockquote>
<p>This tutorial assumes basic knowledge of JavaScript and React. If you’ve never written React code, you should go through <a href="https://reactjs.org/tutorial/tutorial.html" rel="noopener noreferrer" target="_blank">the official React tutorial</a> first.<br>
（このチュートリアルは、JavaScript と React の基本的な知識があることを前提としています。React コードを書いたことがない場合は、まず<a href="https://reactjs.org/tutorial/tutorial.html" rel="noopener noreferrer" target="_blank">公式の React チュートリアル</a>を読んでください。）</p>
<p>引用元：<a href="https://nextjs.org/learn/basics/create-nextjs-app" rel="noopener noreferrer" target="_blank">Create a Next.js App | Learn Next.js</a></p>
</blockquote>
<p>もちろん、その必要がなければここはスルーして次のページから Next.js アプリケーションを作成していけば良いのですが、私はそもそも React を知りたかったので寄り道してまず React のチュートリアルを進めることにしました。</p>
<p>Tutorial: Intro to React<br>
<a href="https://reactjs.org/tutorial/tutorial.html" rel="noopener noreferrer" target="_blank">https://reactjs.org/tutorial/tutorial.html</a></p>
<p>フレームワークのチュートリアルですからこういった案内はよくあるものかもしれません。ただ、飛んだ先の React チュートリアルがまたわかりやすくて良かった。</p>
<p>こうして React のチュートリアルも無事に終えるわけですが、Next.js チュートリアルの基礎編で React について知ったり、実際に簡単に書いたりして最小限の知識を知れていたからというのもあったかもしれません。</p>
<p>Next.js のチュートリアルを実施することで React も学べたということの一番の良体験はここにあったなと振り返って思います。</p>
<p>ちなみに、React チュートリアル自体は ○× ゲームのアプリケーションを作っていくものになっていて、結構作っていて楽しかったですよ。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/241/L22o1pIARVHqOUzCDwR1.png" width="800" height="422" alt="React チュートリアルで作る○×ゲームアプリケーション"></div>
<p>実際の画面と動作はこちらから確認できます。（なお、対戦相手は自分自身になります）<br>
<a href="https://202208-react-tutorial.vercel.app/" rel="noopener noreferrer" target="_blank">https://202208-react-tutorial.vercel.app/</a></p>
<h4 id="簡易なブログアプリケーション">簡易なブログアプリケーション</h4>
<p>満を持して Next.js アプリケーションの作成に入っていくわけですが、内容としては簡易なブログのアプリケーションを作成するものになっています。</p>
<p>環境構築からはじまり、アプリケーション構築、デプロイまで。実際のアプリケーションを世に出すまでがカバーされており、ここを実施することで一通りの Next.js を用いたアプリケーション構築を学べます。</p>
<p>画面遷移やレイアウト、レンダリングなど、1 つ 1 つのセクションがとても短くまとまっていて飽きなかったし、少しづつ進めることもできた。そしてなにより、解説がとてもわかりやすかったです。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/241/waOaBptcm8TE2a3iy3t6.png" width="800" height="444" alt="Next.js チュートリアルで作るブログアプリケーション"></div>
<p>実際の画面と動作はこちらから確認できます。<br>
<a href="https://202208-next-js-tutorial.vercel.app/" rel="noopener noreferrer" target="_blank">https://202208-next-js-tutorial.vercel.app/</a></p>
<h2 id="まとめ">まとめ</h2>
<p>おすすめしてもらった Next.js のチュートリアル。非常に秀逸でした。</p>
<p>順序立てて解説されているのでわかりやすいですし、とにかく解説が親切です。最後まで実施して迷う部分が一つもありませんでした。</p>
<p>英語版しかないので翻訳必須ですが、React ないし Next.js を学びたいなら私からも、オススメです。</p>
<p>今回は最初の一歩を踏み出したところなので、ここから TypeScript を導入してみたり、テストを導入してみたりもやってみたいですね。</p>
<p>薦めてくれたマイフレンド、サンクス！</p>
<h4 id="おまけ">おまけ</h4>
<p>修正プルリクつくったら Vercel がプレビュー環境立ち上げてくれた。最高かよ！</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/241/f64PIGObKFc7YCiD5s90.png" width="800" height="368" alt="プルリク作成時に Vercel がプレビュー環境立ち上げてくれる"></div>

<p>React を使ってみたいと思っていたところマイフレンドフロントエンドエンジニアに Next.js のチュートリアルが良いと薦めていただいたので試してみたが、その体験がとても良かったので記録に残します。</p>
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#react-%E3%81%A8-nextjs">React と Next.js</a></li>
<li><a href="#nextjs-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB">Next.js チュートリアル</a>
<ol>
<li><a href="#%E5%9F%BA%E7%A4%8Efoundations">基礎（FOUNDATIONS）</a></li>
<li><a href="#%E6%9C%80%E5%88%9D%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8Bcreate-your-first-app">最初のアプリを作成する（CREATE YOUR FIRST APP）</a></li>
</ol>
</li>
<li><a href="#%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%8B%E3%82%89%E5%BE%97%E3%82%89%E3%82%8C%E3%82%8B%E3%81%93%E3%81%A8">チュートリアルから得られること</a></li>
<li><a href="#%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%92%E9%80%9A%E3%81%97%E3%81%A6%E3%81%AE%E5%AD%A6%E3%81%B3%E3%81%A8%E6%88%90%E6%9E%9C%E7%89%A9">チュートリアルを通しての学びと成果物</a>
<ol>
<li><a href="#%E5%9F%BA%E7%A4%8Efoundations-1">基礎（FOUNDATIONS）</a></li>
<li><a href="#%E6%9C%80%E5%88%9D%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8Bcreate-your-first-app-1">最初のアプリを作成する（CREATE YOUR FIRST APP）</a></li>
</ol>
</li>
</ol>
<h2 id="react-と-nextjs">React と Next.js</h2>
<p>React（React.js, ReactJS）は、ユーザーインターフェースを構築するための JavaScript ライブラリ。<br>
<a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">https://reactjs.org/</a></p>
<p>Next.js は、React のフレームワーク。<br>
<a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">https://nextjs.org/</a></p>
<p>つまり React と Next.js は、「Vue.js と Nuxt」のように、「React と Next.js」という関係。</p>
<h2 id="nextjs-チュートリアル">Next.js チュートリアル</h2>
<p>Next.js のチュートリアルは以下のページになります。</p>
<p>Next.js Foundations コース<br>
<a href="https://nextjs.org/learn/foundations/about-nextjs" rel="noopener noreferrer" target="_blank">https://nextjs.org/learn/foundations/about-nextjs</a></p>
<p>「FOUNDATIONS」と「CREATE YOUR FIRST APP」が Next.js Foundations コースの領域です。</p>
<div class="img_wrap"><img src="/images/posts/241/Gf46fRJO9563Gqu2uBo0.png" width="800" height="553" alt="Next.js Introduction ページ"></div>
<p>目次としてはこんな感じ</p>
<dl>
<dt>基礎（FOUNDATIONS）</dt>
<dd>
<ol>
<li>Next.js について</li>
<li>Next.js とは？</li>
<li>JavaScript から React へ</li>
<li>React から Next.js へ</li>
<li>Next.js のしくみ</li>
</ol>
</dd>
</dl>
<dl>
<dt>最初のアプリを作成する（CREATE YOUR FIRST APP）</dt>
<dd>
<ol>
<li>Next.js アプリを作成する</li>
<li>ページ間を移動する</li>
<li>アセット、メタデータ、CSS</li>
<li>事前レンダリングとデータ取得</li>
<li>動的ルート</li>
<li>API ルート</li>
<li>Next.js アプリのデプロイ</li>
</ol>
</dd>
</dl>
<p>最初に基礎を学んだ後に、実際に Next.js アプリケーションを作成していく流れです。</p>
<p>「基礎」といっても全てが読みものだけじゃなくて実際に手を動かすので飽きずに進められます。（といっても、1 つ 1 つのセクションは数分で読み終わる程度なので短いです。）</p>
<h3 id="基礎foundations">基礎（FOUNDATIONS）</h3>
<p>基礎章では、React とは何か、Next とは何か。どう動作するのか。といったことを学びます。</p>
<p>DOM がどうとかレンダリングがどうとかみたいなところも解説がありつつ、百聞は一見に如かず方式が取られていて実際に手を動かしながら学んでいきます。</p>
<ol>
<li>簡単に JavaScript で書く</li>
<li>似たようなことを今度は React で書く</li>
<li>さらに今度は Next で書く（厳密には移行させていく）</li>
</ol>
<p>といった段階が踏まれており、</p>
<p>「フレームワークのチュートリアルだから、言語とライブラリは知っている前提でいきますのでよろ。」</p>
<p>みたいな、よくあるフレームワークのチュートリアルとは一線を介するわかりやすさがありました。</p>
<h3 id="最初のアプリを作成するcreate-your-first-app">最初のアプリを作成する（CREATE YOUR FIRST APP）</h3>
<p>この章では、実際に Next.js を使ってアプリケーションを構築していきます。</p>
<ol>
<li>環境構築</li>
<li>アプリケーション開発</li>
<li>デプロイ</li>
</ol>
<p>と、アプリケーション開発の初めから終わりまでをカバーしていて、このチュートリアルが終わった時には達成感を得られるくらいの成果物が出来上がります。</p>
<h2 id="チュートリアルから得られること">チュートリアルから得られること</h2>
<p>フレームワークを学ぶということは、ベースになっている言語やライブラリをある程度知っている必要がありますよね。</p>
<p>だから「React に触れてみたい」が動機の私も漏れなく</p>
<p>「いきなりフレームワークのチュートリアルなんて、初学者にはつらみしかないだろう。」</p>
<p>と思っていたのですが、</p>
<p>実際はそうではなかった。</p>
<p>Next.js のチュートリアルを一通りやってみた結果、初学者の私でもきちんとゴールまでたどり着けました。</p>
<p>あらゆる基礎知識や思想、React, Next の機能もそうですが、チュートリアルで全てを網羅できるわけではありませんし、これだけで完全理解となるわけではありませんが、何より 1 つの完成形（アプリケーションを作るということ）までたどり着けることで、「できるかも」という自信につながります。</p>
<p>つまり、ネクストステップへのモチベーションが生まれるわけですね。</p>
<p>成功体験が生み出すマジックはやはり素晴らしいと感じました。</p>
<h2 id="チュートリアルを通しての学びと成果物">チュートリアルを通しての学びと成果物</h2>
<p>では実際に、チュートリアルを進めたら実際にどんな成果物が生まれたかを紹介します。</p>
<h3 id="基礎foundations-1">基礎（FOUNDATIONS）</h3>
<p>基礎編では、最終的に Next.js を使った簡単な画面を作るのですが、以下のような「いいねボタン」を作成して React, Next.js の動作を学ぶことができます。</p>
<div class="img_wrap"><img src="/images/posts/241/dGpPDPz0t5IiacOn4QvO.png" width="800" height="422" alt="いいねボタンの実装画面"></div>
<p>実際の画面・動作はこちらから確認できます。<br>
<a href="https://202208-next-js-tutorial-foundations.vercel.app/" rel="noopener noreferrer" target="_blank">https://202208-next-js-tutorial-foundations.vercel.app/</a></p>
<h3 id="最初のアプリを作成するcreate-your-first-app-1">最初のアプリを作成する（CREATE YOUR FIRST APP）</h3>
<p>基礎章が終わったので次は実際のアプリケーションを作成していくわけですが、ここからが秀逸でした。</p>
<h4 id="いきなり-nextjs-を使わない世界線が存在する">いきなり Next.js を使わない世界線が存在する</h4>
<p>実はこの章の冒頭セクションにこんな一文があります。</p>
<blockquote>
<p>This tutorial assumes basic knowledge of JavaScript and React. If you’ve never written React code, you should go through <a href="https://reactjs.org/tutorial/tutorial.html" rel="noopener noreferrer" target="_blank">the official React tutorial</a> first.<br>
（このチュートリアルは、JavaScript と React の基本的な知識があることを前提としています。React コードを書いたことがない場合は、まず<a href="https://reactjs.org/tutorial/tutorial.html" rel="noopener noreferrer" target="_blank">公式の React チュートリアル</a>を読んでください。）</p>
<p>引用元：<a href="https://nextjs.org/learn/basics/create-nextjs-app" rel="noopener noreferrer" target="_blank">Create a Next.js App | Learn Next.js</a></p>
</blockquote>
<p>もちろん、その必要がなければここはスルーして次のページから Next.js アプリケーションを作成していけば良いのですが、私はそもそも React を知りたかったので寄り道してまず React のチュートリアルを進めることにしました。</p>
<p>Tutorial: Intro to React<br>
<a href="https://reactjs.org/tutorial/tutorial.html" rel="noopener noreferrer" target="_blank">https://reactjs.org/tutorial/tutorial.html</a></p>
<p>フレームワークのチュートリアルですからこういった案内はよくあるものかもしれません。ただ、飛んだ先の React チュートリアルがまたわかりやすくて良かった。</p>
<p>こうして React のチュートリアルも無事に終えるわけですが、Next.js チュートリアルの基礎編で React について知ったり、実際に簡単に書いたりして最小限の知識を知れていたからというのもあったかもしれません。</p>
<p>Next.js のチュートリアルを実施することで React も学べたということの一番の良体験はここにあったなと振り返って思います。</p>
<p>ちなみに、React チュートリアル自体は ○× ゲームのアプリケーションを作っていくものになっていて、結構作っていて楽しかったですよ。</p>
<div class="img_wrap"><img src="/images/posts/241/L22o1pIARVHqOUzCDwR1.png" width="800" height="422" alt="React チュートリアルで作る○×ゲームアプリケーション"></div>
<p>実際の画面と動作はこちらから確認できます。（なお、対戦相手は自分自身になります）<br>
<a href="https://202208-react-tutorial.vercel.app/" rel="noopener noreferrer" target="_blank">https://202208-react-tutorial.vercel.app/</a></p>
<h4 id="簡易なブログアプリケーション">簡易なブログアプリケーション</h4>
<p>満を持して Next.js アプリケーションの作成に入っていくわけですが、内容としては簡易なブログのアプリケーションを作成するものになっています。</p>
<p>環境構築からはじまり、アプリケーション構築、デプロイまで。実際のアプリケーションを世に出すまでがカバーされており、ここを実施することで一通りの Next.js を用いたアプリケーション構築を学べます。</p>
<p>画面遷移やレイアウト、レンダリングなど、1 つ 1 つのセクションがとても短くまとまっていて飽きなかったし、少しづつ進めることもできた。そしてなにより、解説がとてもわかりやすかったです。</p>
<div class="img_wrap"><img src="/images/posts/241/waOaBptcm8TE2a3iy3t6.png" width="800" height="444" alt="Next.js チュートリアルで作るブログアプリケーション"></div>
<p>実際の画面と動作はこちらから確認できます。<br>
<a href="https://202208-next-js-tutorial.vercel.app/" rel="noopener noreferrer" target="_blank">https://202208-next-js-tutorial.vercel.app/</a></p>
<h2 id="まとめ">まとめ</h2>
<p>おすすめしてもらった Next.js のチュートリアル。非常に秀逸でした。</p>
<p>順序立てて解説されているのでわかりやすいですし、とにかく解説が親切です。最後まで実施して迷う部分が一つもありませんでした。</p>
<p>英語版しかないので翻訳必須ですが、React ないし Next.js を学びたいなら私からも、オススメです。</p>
<p>今回は最初の一歩を踏み出したところなので、ここから TypeScript を導入してみたり、テストを導入してみたりもやってみたいですね。</p>
<p>薦めてくれたマイフレンド、サンクス！</p>
<h4 id="おまけ">おまけ</h4>
<p>修正プルリクつくったら Vercel がプレビュー環境立ち上げてくれた。最高かよ！</p>
<div class="img_wrap"><img src="/images/posts/241/f64PIGObKFc7YCiD5s90.png" width="800" height="368" alt="プルリク作成時に Vercel がプレビュー環境立ち上げてくれる"></div>

Author