Next.js from Development to Deployment: Build a Music Event Website

Video description

Build two different websites from development to deployment with the help of Next.js and other tools, the backend support provided by the Strapi CMS

About This Video

Build a music event application from start to finish
Build a static blog with pagination, search, and categories using markdown
Learn to build a full-stack application with CRUD, pagination, authentication, and more

In Detail

Next.js is a framework …

Next.js from Development to Deployment: Build a Music Event Website

Video description

Build two different websites from development to deployment with the help of Next.js and other tools, the backend support provided by the Strapi CMS

About This Video

Build a music event application from start to finish
Build a static blog with pagination, search, and categories using markdown
Learn to build a full-stack application with CRUD, pagination, authentication, and more

In Detail

Next.js is a framework for building server-side rendered React websites as well as static websites. This is a project-based course for learning Next.js. You'll build a music events application that will give you the foundational knowledge that you need to create your own applications. You'll use Strapi as our backend, but you could just as well use anything.

The course starts with learning the fundamentals of Next.js like pages and routing, data fetching methods, custom API routes, static generation, CSS styling, and image optimization.

While working on the main project, you will also be working with Strapi CMS, authentication with JSON Web Tokens, authorization and access control, storing HttpOnly cookies on the server, pagination, search filters, and more, image uploading with Cloudinary integration, and deploying to Vercel and Heroku.

The second project is a static blog using Next.js called DevSpace, where you will work with Tailwind CSS integration, static data fetching/generation, create, fetch and parse markdown with Frontmatter, search functionality with API route/serverless function, post caching, Git Hooks with Husky, and deploy to Vercel.

By the end of this course, you will be able to create two different websites: Music Event Website and DevSpace (static blog) using Next.js and various other tools from development to deployment.

Who this book is for

The course is better suited for the individual who is comfortable with JavaScript basics and modern JavaScript features such as arrow functions, restructuring, and the spread operator. The course requires some basics of React; the course does not have the explanation of a few things such as components, props, and JSX.

This course will help anyone who wants to learn Next.js and develop websites along with backend support.

Publisher resources

Download Example Code

Chapter 1 : Introduction to the Course

Welcome to the Course

What is Next.js?

Main Project Overview

Environment and Tools

Chapter 2 : Next.js Fundamentals

Creating a Next.js App

Pages and Routing

Next Link and Router

Head Tags and Layout

S Header and Footer

Custom 404 Page

Module Aliases with jsconfig

Showcase Component

Chapter 3 : Data Fetching

API Routes

getServerSideProps and getStaticProps

Displaying Events

getStaticPaths

Single Event Page

Chapter 4 : Strapi Backend

Strapi CMS Setup

Cloudinary for Images

Event Content Type

Chapter 5 : Events Functionality - Part 1

Connecting to the Strapi API

Search Page Using Filters

Search Component

Add Event Page

Event Submit and React Toastify

Create a Slug

Chapter 6 : Events Functionality - Part 2

Delete Events

Edit Event and Image Preview

Modal Component

Image Upload

Events Pagination

Chapter 7 : Authentication, JWT, and HttpOnly Cookies

Auth Context

Our JWT Strategy Explained

Store JWT in Server HttpOnly Cookie

Persist Logged In User

Logout and Destroy Cookie

Chapter 8 : Authorization and Access

Custom User Events Endpoint

Getting User Events for Dashboard

Display Dashboard Events

Create Is Owner Policy for Events

Associating Events with Users

Authenticated Edit, Delete and Image Upload

Chapter 9 : Extras and Deployment

Add Map to Event Pages

Strapi Backend Deploy - Heroku

Next.js Deploy - Vercel

Chapter 10 : Project 2 â€“ DevSpace Static Markdown Blog

Project Introduction

Markdown - What and Why?

Markdown Crash Course

Next.js and Tailwind CSS Setup

Layout Component

Header and Tailwind Styling

About and 404 Page

Chapter 11 : Fetch, Parse, and Display Markdown Posts

Blog Post Markdown Files

Get Posts and Parse Frontmatter

Display Posts

Sort Posts By Date

Category Label Component

Generate Static Paths and Single Post Data

Display Single Blog Post

Chapter 12 : Pagination and Category Pages

Start Pagination - Generate Paths

Fetch Paginated Posts

Pagination Links Component

Category Pages

Clean Up Get Posts

Category Sidebar

Next Export and Limitations

Chapter 13 : Search, Caching Posts, and Deployment

How Search will Work

Search Component

Search API Route

Search Results Components

First Deployment

Cache Posts

Pre-Commit Hook with Husky

Wrap Up

Start your Free Trial

Self paced

Go to the Course
We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.