I was interested in using React and a friend of mine who is a front-end engineer recommended the Next.js tutorial to me, so I gave it a try.

If you want to learn React.js, I recommend the Next.js tutorial.

<p>I was interested in using React and a friend of mine who is a front-end engineer recommended the Next.js tutorial to me, so I gave it a try.</p>
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#react-%E3%81%A8-nextjs">React と Next.js</a></li>
<li><a href="#nextjs-tutorial">Next.js Tutorial</a>
<ol>
<li><a href="#foundations">FOUNDATIONS</a></li>
<li><a href="#create-your-first-app">CREATE YOUR FIRST APP</a></li>
</ol>
</li>
<li><a href="#what-you-can-glean-from-the-nextjs-tutorial">What you can glean from the Next.js tutorial.</a></li>
<li><a href="#learning-and-deliverables-throughout-the-tutorial">Learning and deliverables throughout the tutorial.</a>
<ol>
<li><a href="#foundations-1">FOUNDATIONS</a></li>
<li><a href="#create-your-first-app-1">CREATE YOUR FIRST APP</a></li>
</ol>
</li>
<li><a href="#to-close">To close</a></li>
</ol>
<h2 id="react-と-nextjs">React と Next.js</h2>
<p>React (React.js, ReactJS) is a JavaScript library for building user interfaces.<br>
<a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">https://reactjs.org/</a></p>
<p>Next.js is a React framework.<br>
<a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">https://nextjs.org/</a></p>
<p>In other words, React and Next.js are like "Vue.js and Nuxt".</p>
<h2 id="nextjs-tutorial">Next.js Tutorial</h2>
<p>The Next.js tutorial I recommend is on the following page:</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>Next.js Foundations consists of "FOUNDATIONS" and "CREATE YOUR FIRST APP".</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>The table of contents consists of</p>
<dl>
<dt>FOUNDATIONS</dt>
<dd>
<ol>
<li>About Next.js</li>
<li>What is Next.js?</li>
<li>From JavaScript to React</li>
<li>From React to Next.js</li>
<li>How Next.js Works</li>
</ol>
</dd>
</dl>
<dl>
<dt>CREATE YOUR FIRST APP</dt>
<dd>
<ol>
<li>Create a Next.js App</li>
<li>Navigate Between Pages</li>
<li>Assets, Metadata, and CSS</li>
<li>Pre-rendering and Data Fetching</li>
<li>Dynamic Routes</li>
<li>API Routes</li>
<li>Deploying Your Next.js App</li>
</ol>
</dd>
</dl>
<p>After first learning the basics, the flow is to actually create a Next.js application.</p>
<p>Not all of the "basics" are just reading, but there is actual hands-on work, so you won't get bored. (Although, each section is short, taking only a few minutes to read.)</p>
<h3 id="foundations">FOUNDATIONS</h3>
<p>In the foundation chapter, you will learn what React is, what Next is, and how it works.</p>
<p>You can learn not only by reading the explanations, but also by coding.</p>
<ol>
<li>Writing simple JavaScript.</li>
<li>Write the same program as in the previous section, this time in React.</li>
<li>The same program is written again, this time in Next.js.</li>
</ol>
<p>These steps made it very easy for me to understand, even though I have no knowledge of React.js.</p>
<h3 id="create-your-first-app">CREATE YOUR FIRST APP</h3>
<p>In this chapter, we will actually build an application using Next.js.</p>
<ol>
<li>environment construction</li>
<li>application development</li>
<li>deploy</li>
</ol>
<p>It covers application development from beginning to end, so that by the end of this tutorial, you will have enough deliverables to give you a sense of accomplishment.</p>
<h2 id="what-you-can-glean-from-the-nextjs-tutorial">What you can glean from the Next.js tutorial.</h2>
<p>I had assumed that learning a framework would require some familiarity with the language and libraries on which it is based.</p>
<p>But in fact, this was not the case.</p>
<p>I worked on the Next.js tutorial and even as a beginner, I was able to reach the goal properly.</p>
<p>Not all the fundamentals, ideas, and features of React, Next can be understood in a single tutorial.</p>
<p>However, I was able to get to the point where I could complete the application, which gave me a lot of confidence.</p>
<h2 id="learning-and-deliverables-throughout-the-tutorial">Learning and deliverables throughout the tutorial.</h2>
<p>Here are the actual deliverables that were produced once we proceeded with the tutorial.</p>
<h3 id="foundations-1">FOUNDATIONS</h3>
<p>In the basic section, you will eventually create a simple screen using Next.js. You can learn how React and Next.js work by creating a "like button" like the one below.</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/241/dGpPDPz0t5IiacOn4QvO.png" width="800" height="422" alt="Like button implementation screen"></div>
<p>Actual screen and operation can be checked here.<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>Now that the basic chapter was over, the next step was to create the actual application, and this is where it started to get great.</p>
<h4 id="there-is-a-world-line-that-does-not-suddenly-use-nextjs">There is a world line that does not suddenly use Next.js.</h4>
<p>The opening section of this chapter contains this sentence.</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.</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>Of course, if you don't need to do that, you can skip this section and create a Next.js application from the next page, but since I wanted to learn about React in the first place, I decided to take a side trip and proceed with the React tutorial first.</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>The React tutorial was easy to follow and very impressive.</p>
<p>I was able to successfully complete the React tutorial, probably due to the fact that I had a minimum knowledge of React from the Next.js tutorial's basic section and actually wrote a simple code.</p>
<p>"By doing the Next.js tutorial, I also learned React." I look back and think the best experience was here.</p>
<p>Incidentally, the React tutorial itself is about building a tic-tac-toe game application, which was quite fun to make.</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/241/L22o1pIARVHqOUzCDwR1.png" width="800" height="422" alt="React チュートリアルで作る○×ゲームアプリケーション"></div>
<p>You can see the actual screen and operation here.<br>
<a href="https://202208-react-tutorial.vercel.app/" rel="noopener noreferrer" target="_blank">https://202208-react-tutorial.vercel.app/</a></p>
<h4 id="simple-blog-application">Simple blog application</h4>
<p>I am finally ready to work on creating a Next.js application. The next tutorial is a simple blog application creation.</p>
<p>Starting with environment construction, building an application, and deploying it. This course covers the entire process of building an application using Next.js, from environment construction to application building and deployment, up until the actual application is released to the public.</p>
<p>I did not get bored because each section was very short and organized, such as screen transitions, layout, rendering, etc., and I was able to go through it a little at a time. And above all, the explanations were very easy to understand.</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/241/waOaBptcm8TE2a3iy3t6.png" width="800" height="444" alt="Blog application created with Next.js tutorial"></div>
<p>You can see the actual screen and operation here.<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="to-close">To close</h2>
<p>A friend recommended the Next.js tutorial to me and it was a very good experience for me.</p>
<p>It is easy to understand because it is explained in an orderly manner, and the explanations are just very kind. There was not a single part that I was lost after implementing it until the end.</p>
<p>Thanks, my friend, for recommending it!</p>

<p>I was interested in using React and a friend of mine who is a front-end engineer recommended the Next.js tutorial to me, so I gave it a try.</p>
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#react-%E3%81%A8-nextjs">React と Next.js</a></li>
<li><a href="#nextjs-tutorial">Next.js Tutorial</a>
<ol>
<li><a href="#foundations">FOUNDATIONS</a></li>
<li><a href="#create-your-first-app">CREATE YOUR FIRST APP</a></li>
</ol>
</li>
<li><a href="#what-you-can-glean-from-the-nextjs-tutorial">What you can glean from the Next.js tutorial.</a></li>
<li><a href="#learning-and-deliverables-throughout-the-tutorial">Learning and deliverables throughout the tutorial.</a>
<ol>
<li><a href="#foundations-1">FOUNDATIONS</a></li>
<li><a href="#create-your-first-app-1">CREATE YOUR FIRST APP</a></li>
</ol>
</li>
<li><a href="#to-close">To close</a></li>
</ol>
<h2 id="react-と-nextjs">React と Next.js</h2>
<p>React (React.js, ReactJS) is a JavaScript library for building user interfaces.<br>
<a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">https://reactjs.org/</a></p>
<p>Next.js is a React framework.<br>
<a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">https://nextjs.org/</a></p>
<p>In other words, React and Next.js are like "Vue.js and Nuxt".</p>
<h2 id="nextjs-tutorial">Next.js Tutorial</h2>
<p>The Next.js tutorial I recommend is on the following page:</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>Next.js Foundations consists of "FOUNDATIONS" and "CREATE YOUR FIRST APP".</p>
<div class="img_wrap"><img src="/images/posts/241/Gf46fRJO9563Gqu2uBo0.png" width="800" height="553" alt="Next.js Introduction"></div>
<p>The table of contents consists of</p>
<dl>
<dt>FOUNDATIONS</dt>
<dd>
<ol>
<li>About Next.js</li>
<li>What is Next.js?</li>
<li>From JavaScript to React</li>
<li>From React to Next.js</li>
<li>How Next.js Works</li>
</ol>
</dd>
</dl>
<dl>
<dt>CREATE YOUR FIRST APP</dt>
<dd>
<ol>
<li>Create a Next.js App</li>
<li>Navigate Between Pages</li>
<li>Assets, Metadata, and CSS</li>
<li>Pre-rendering and Data Fetching</li>
<li>Dynamic Routes</li>
<li>API Routes</li>
<li>Deploying Your Next.js App</li>
</ol>
</dd>
</dl>
<p>After first learning the basics, the flow is to actually create a Next.js application.</p>
<p>Not all of the "basics" are just reading, but there is actual hands-on work, so you won't get bored. (Although, each section is short, taking only a few minutes to read.)</p>
<h3 id="foundations">FOUNDATIONS</h3>
<p>In the foundation chapter, you will learn what React is, what Next is, and how it works.</p>
<p>You can learn not only by reading the explanations, but also by coding.</p>
<ol>
<li>Writing simple JavaScript.</li>
<li>Write the same program as in the previous section, this time in React.</li>
<li>The same program is written again, this time in Next.js.</li>
</ol>
<p>These steps made it very easy for me to understand, even though I have no knowledge of React.js.</p>
<h3 id="create-your-first-app">CREATE YOUR FIRST APP</h3>
<p>In this chapter, we will actually build an application using Next.js.</p>
<ol>
<li>environment construction</li>
<li>application development</li>
<li>deploy</li>
</ol>
<p>It covers application development from beginning to end, so that by the end of this tutorial, you will have enough deliverables to give you a sense of accomplishment.</p>
<h2 id="what-you-can-glean-from-the-nextjs-tutorial">What you can glean from the Next.js tutorial.</h2>
<p>I had assumed that learning a framework would require some familiarity with the language and libraries on which it is based.</p>
<p>But in fact, this was not the case.</p>
<p>I worked on the Next.js tutorial and even as a beginner, I was able to reach the goal properly.</p>
<p>Not all the fundamentals, ideas, and features of React, Next can be understood in a single tutorial.</p>
<p>However, I was able to get to the point where I could complete the application, which gave me a lot of confidence.</p>
<h2 id="learning-and-deliverables-throughout-the-tutorial">Learning and deliverables throughout the tutorial.</h2>
<p>Here are the actual deliverables that were produced once we proceeded with the tutorial.</p>
<h3 id="foundations-1">FOUNDATIONS</h3>
<p>In the basic section, you will eventually create a simple screen using Next.js. You can learn how React and Next.js work by creating a "like button" like the one below.</p>
<div class="img_wrap"><img src="/images/posts/241/dGpPDPz0t5IiacOn4QvO.png" width="800" height="422" alt="Like button implementation screen"></div>
<p>Actual screen and operation can be checked here.<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>Now that the basic chapter was over, the next step was to create the actual application, and this is where it started to get great.</p>
<h4 id="there-is-a-world-line-that-does-not-suddenly-use-nextjs">There is a world line that does not suddenly use Next.js.</h4>
<p>The opening section of this chapter contains this sentence.</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.</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>Of course, if you don't need to do that, you can skip this section and create a Next.js application from the next page, but since I wanted to learn about React in the first place, I decided to take a side trip and proceed with the React tutorial first.</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>The React tutorial was easy to follow and very impressive.</p>
<p>I was able to successfully complete the React tutorial, probably due to the fact that I had a minimum knowledge of React from the Next.js tutorial's basic section and actually wrote a simple code.</p>
<p>"By doing the Next.js tutorial, I also learned React." I look back and think the best experience was here.</p>
<p>Incidentally, the React tutorial itself is about building a tic-tac-toe game application, which was quite fun to make.</p>
<div class="img_wrap"><img src="/images/posts/241/L22o1pIARVHqOUzCDwR1.png" width="800" height="422" alt="React チュートリアルで作る○×ゲームアプリケーション"></div>
<p>You can see the actual screen and operation here.<br>
<a href="https://202208-react-tutorial.vercel.app/" rel="noopener noreferrer" target="_blank">https://202208-react-tutorial.vercel.app/</a></p>
<h4 id="simple-blog-application">Simple blog application</h4>
<p>I am finally ready to work on creating a Next.js application. The next tutorial is a simple blog application creation.</p>
<p>Starting with environment construction, building an application, and deploying it. This course covers the entire process of building an application using Next.js, from environment construction to application building and deployment, up until the actual application is released to the public.</p>
<p>I did not get bored because each section was very short and organized, such as screen transitions, layout, rendering, etc., and I was able to go through it a little at a time. And above all, the explanations were very easy to understand.</p>
<div class="img_wrap"><img src="/images/posts/241/waOaBptcm8TE2a3iy3t6.png" width="800" height="444" alt="Blog application created with Next.js tutorial"></div>
<p>You can see the actual screen and operation here.<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="to-close">To close</h2>
<p>A friend recommended the Next.js tutorial to me and it was a very good experience for me.</p>
<p>It is easy to understand because it is explained in an orderly manner, and the explanations are just very kind. There was not a single part that I was lost after implementing it until the end.</p>
<p>Thanks, my friend, for recommending it!</p>

Author