Next.js: Building Scalable Web Applications

Code: https://github.com/WSU-Society-of-Computer-Developers/workshops/tree/main/next_apr7/app

Slides: https://github.com/WSU-Society-of-Computer-Developers/workshops/blob/main/next_apr7/slides.pdf

Next.js is a web development framework that makes it easier to build complex and high-performance web applications using React. One of the key features of Next.js is server-side rendering (SSR) where web pages are generated on the server and then sent to the client instead of being generated on the client-side. This results in faster load times and overall better user experience.

Next.js also supports static site generation (SSG) where web pages are generated at build time and then served statically to the client. This can improve performance and reduce server load, especially for sites with a lot of traffic. Another important feature of Next.js is its automatic code splitting and lazy loading which can help reduce page load times by only loading the code that’s needed for a particular page or feature.

In this workshop, we build a full-stack web application project that will take and display dynamic data from dummy/placeholder API endpoints using server-side rendering patterns within the Next.js framework.

Timestamps:
00:00:00 – Next.js synopsis
00:10:47 – Project setup
00:19:36 – Project overview
00:27:32 – API wrapper
00:32:04 – SSR via getServerSideProps
00:46:21 – SSG via getStaticProps
01:00:21 – SSG via getStaticPaths (dynamic routing)
01:19:32 – SSG revalidation trigger (API endpoint)
01:26:36 – Production build

Hosted by Zavaar Shah