The Next.js Guide: Pages Router
Next.js is a powerful React framework that enables developers to create server-rendered and statically generated websites. I created this guide to learn the concepts I was struggling with and make it easier for others to understand. I hope it helps!
In this repo you can find the code snippets for:
- A page implementing getStaticProps and getStaticPaths
- A page implementing getStaticProps
- A page implementing getServerSideProps with Client Side fetching
- A page to demonstrate Hydration Errors
- Using the api directory to implement our own api routes
Resources
Learning about Hydration
- What is Hydration by Builder (Watch this one first it explains the difference between SPA and the Pre-rendering process)
- What Exactly is REACT HYDRATION? And why does it matter? by Deeecode The Web
- Why Do HYDRATION ERRORS Exist? And how to solve them by Deeecode The Web
- The Perils of Hydration by Josh W Comeau
- Hydrate by React Docs
Learning about Next.js
- The Story of Next.js by Uidotdev (Watch to understand why Next.js was created)
- How NextJS REALLY Works by Theo
Learning about getServerSideProps and getStaticProps
- Next.js - GetServerSideProps vs GetStaticProps by Morado Web Development
- This video gave a clear demonstration of how the functions work! It inspired how to create this tutorial.
Learning about Reconciliation
- What is the concept of reconciliation in React? by educative.io