Description

This course focuses on building the application and static website with the help of Next.js. Next.js is written on JavaScript, therefore, the individual will learn to develop the full-stack application CRUD, pagination, authentication, and more.

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. The code files and resource files are uploaded on the GitHub repository at https://github.com/PacktPublishing/Next.js-from-Development-to-Deployment-Build-a-Music-Event-Website

What You Will Learn

Learn the fundamentals of Next.js
Create a backend using Strapi CMS
Pagination, search, image uploading with Cloudinary
Deploy to production using Vercel and Heroku
Integrate Git Hooks with Husky
JWT authentication/HttpOnly cookie storage

Audience

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.

Approach

The course comes bundled with a hands-on project that directly jumps to the practical content, which helps the individual reinforce their learning and develop websites as intended.

The course is designed to build two different websites right from development to deployment along with backend support.

Key Features

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

Github Repo

https://github.com/PacktPublishing/Next.js-from-Development-to-Deployment-Build-a-Music-Event-Website

About the Author

Brad Traversy

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad's courses.

Course Outline

1. Introduction to the Course

1. Welcome to the Course

This is an overview video about this course.

2. What is Next.js?

This video provides an information about Next.js.

3. Main Project Overview

This video demonstrates the overview of the main project.

4. Environment and Tools

This video demonstrates the environment and tools required for this course.

2. Next.js Fundamentals

1. Creating a Next.js App

This video explains the steps to create a Next.js app.

2. Pages and Routing

This video explains pages and routing options.

3. Next Link and Router

This video demonstrates the link and router option.

4. Head Tags and Layout

This video explains the head tag and layout.

5. S Header and Footer

This video explains the header and footer options.

6. Custom 404 Page

This video shows the custom 404 page.

7. Module Aliases with jsconfig

This video explains module aliases with jsconfig.

8. Showcase Component

This video helps showcase component.

3. Data Fetching

1. API Routes

This video talks about API routes.

2. getServerSideProps and getStaticProps

This video explains the date fetching methods: getServerSideProps and getStaticProps.

3. Displaying Events

This video focuses on displaying events.

4. getStaticPaths

This video focuses on getStaticPaths.

5. Single Event Page

This video explains the single event page.

4. Strapi Backend

1. Strapi CMS Setup

This video provides the setup of Strapi CMS.

2. Cloudinary for Images

This video demonstrates the use of Cloudinary for images.

3. Event Content Type

This video explains the event content type.

5. Events Functionality - Part 1

1. Connecting to the Strapi API

This video shows how to get connected to the Strapi API.

2. Search Page Using Filters

This video shows how to search page using filters.

3. Search Component

This video explains how to search component.

4. Add Event Page

This video explains how to add event page.

5. Event Submit and React Toastify

This video explains event submit and React Toastify.

6. Create a Slug

This video explains how to create a slug.

6. Events Functionality - Part 2

1. Delete Events

This video explains how to delete events.

2. Edit Event and Image Preview

This video explains how to edit event and image preview.

3. Modal Component

This video explains how to add modal component.

4. Image Upload

This video demonstrates how to upload image.

5. Events Pagination

This video talks about events pagination.

7. Authentication, JWT, and HttpOnly Cookies

1. Register and Login Forms

This video explains how to register and login forms.

2. Auth Context

This video focusses on Auth Context.

3. Our JWT Strategy Explained

This video explores the JWT strategy.

4. Login and Get JWT

This video explains the login and get JWT authentication/authorization.

5. Store JWT in Server HttpOnly Cookie

This video explains how to store JWT in server HttpOnly cookie.

6. Persist Logged In User

This video explains how to persist logged in user.

7. Logout and Destroy Cookie

This video explains about the logout and destroy cookie.

8. Register User

This video explains how to register user.

8. Authorization and Access

1. Custom User Events Endpoint

This video talks about custom user events endpoint.

2. Getting User Events for Dashboard

This video explains how to get user events for dashboard.

3. Display Dashboard Events

This video focuses on how to display dashboard events.

4. Create Is Owner Policy for Events

This video helps create Is Owner Policy for events.

5. Associating Events with Users

This video demonstrates the association events with users.

6. Authenticated Edit, Delete and Image Upload

This video focuses on authenticated edit, delete, and image upload.

9. Extras and Deployment

1. Add Map to Event Pages

This video demonstrates how to add map to event pages.

2. Strapi Backend Deploy - Heroku

This video demonstrates how to deploy using Strapi - Heroku.

3. Next.js Deploy - Vercel

This video demonstrates how to deploy Next.js app to Vercel.

10. Project 2 - DevSpace Static Markdown Blog

1. Project Introduction

This video provides an introduction to the project.

2. Markdown - What and Why?

This video explains what and why about markdown.

3. Markdown Crash Course

This video explores more insights on markdown.

4. Next.js and Tailwind CSS Setup

This video demonstrates the setup of Next.js and Tailwind CSS.

5. Layout Component

This video explains how to add layout component.

6. Header and Tailwind Styling

This video explains about the header and tailwind styling.

7. About and 404 Page

This video explains the about and 404 page.

11. Fetch, Parse, and Display Markdown Posts

1. Blog Post Markdown Files

This video talks about blog post markdown files.

2. Get Posts and Parse Frontmatter

This video focuses on get posts and parse frontmatter.

3. Display Posts

This video explains how to display posts.

4. Sort Posts By Date

This video explains how to sort posts by date.

5. Category Label Component

This video explains about the category label component.

6. Generate Static Paths and Single Post Data

This video explains about generating static paths and single post data.

7. Display Single Blog Post

This video focuses on displaying single blog post.

12. Pagination and Category Pages

1. Start Pagination - Generate Paths

This video focuses on start pagination - generate paths.

2. Fetch Paginated Posts

This video focusses on fetching paginated posts.

3. Pagination Links Component

This video explores pagination links component.

4. Category Pages

This video explores category pages.

5. Clean Up Get Posts

This video explains how to clean up get posts.

6. Category Sidebar

This video explains the category sidebar.

7. Next Export and Limitations

This video explains about the Next.js export and limitations.

13. Search, Caching Posts, and Deployment

1. How Search will Work

This video demonstrates how search will work.

2. Search Component

This video explains how to add the search component.

3. Search API Route

This video explores the search API route.

4. Search Results Components

This video explains the search results components.

5. First Deployment

This video shows the deployment part.

6. Cache Posts

This video explains about cache posts.

7. Pre-Commit Hook with Husky

This video demonstrates Pre-Commit Hook with Husky.

8. Wrap Up

This is a conclusion video of this course.

Course Images

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

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews