The Next.js tutorial explores the foundations of Next.js and allows the user to experiment with the multitude of features that Next.js provides. It includes an overview of optimizations, data fetching, and manipulating data just to name a few. I consider this a great tutorial to start working with full stack development. To view the finished project, click the “View Project” above and when prompted to login, use the following credentials:
User Name: user@nextmail.com
Password: 123456
Tutorial: https://nextjs.org/learn/dashboard-app
Insights Gain:
The insights gained were particularity from the Font Styling / Image Optimizations and the Data Fetching sections. With the font styling, if you have worked in Tailwind.css before, you will noticed there is only three font-families to choose from. Provided in this tutorial a way to incorporate many different fonts through the use of Google Fonts.
The Next.js tutorial also provide insights and differences between static assets and using image optimization functionally. To summarize, when you are uploading a static image or an image with manual image resizing and using the <img> tag in HTML, it is unresponsive to different screen sizes and layout shifts. With Image Optimization and incorporation of the <Image> tag, this eliminates the concern and automatically optimizes the image. This is an important feature in today’s world with a multitude of screen sizes and shifting of layouts.
Finally, the last insight gained from this tutorial was the Data Fetching from a Postgres database. Next.js walks through how to set up a Postgres Database with Vercel. Once created, you can integrate and start to query your data. I found this section helpful because I did not know how a database was incorporated into a Production Project. Then once integrated, Next.js provided SQL to query the prepopulated data and provided helpful insights when to use an API layer and what is the most optimal ways to secure data.
Google Fonts: https://fonts.google.com/knowledge/glossary/subsetting
Lessons Learned:
The lessons learned from this tutorial was documentation on the React Foundations and how React and Next.js communicate to each other to build web development applications. Before the start of this tutorial, there is prerequisite knowledge for this tutorial with understanding React. I was unfamiliar with React and found, throughout this tutorial, reverting back to the React foundations course provided at the beginning of this tutorial to provide further understanding. For example, the utilization of props and states were points of focus to read and understand. The ability to reread and adopt the knowledge in the prerequisite tutorial was essential in the completion of this tutorial.
Next.js Prerequisite Tutorial: https://nextjs.org/learn/react-foundations
I consider this a great tutorial to learn the basics of Next.js and provides a wide range of opportunities to continue your learning. I specifically liked, on certain sections, how they provided additional documentation to continue reading. With this tutorial, I learned the foundations of working with Next.js, connecting to Vercel, and creating a full stack web development project.
