Learn how to build a Next.js application by building a shopping cart web app for a fictional game store with product category pages.

Next.js, the React framework by Vercel, has continued to grow in popularity as more React developers pursue server-side rendering, static site generation, and incremental static regeneration, among other SEO and optimization benefits.

With the gentle learning curve that comes with Next.js, building applications within the framework is easy, even if you’ve only used React previously.

To learn how to build a Next.js application, this tutorial details how to build a shopping cart web app for a fictional game store with the ability to add or remove items from the cart, view all products, view products by category, and more.

What this Next.js tutorial covers

When building the app, we’ll cover the following features:

• Setting up a Next.js project with create-next-app
• The routing system in Next.js
• Styling with CSS modules
• Image optimization with the <Image> component
• Integrating Redux Toolkit for global state management
• Static generation and server-side rendering
• Next.js API routes
• Data fetching with getStaticProps(), getStaticPaths, and getServerSideProps()

You can find the source code for the completed project in this GitHub repository and the live demo deployed on Vercel.

#next #react #javascript #web-development #webdev