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

Focused View

Brad Traversy

9:30:14

86 View

01.01-welcome to the course.mp4

01:51

01.02-what is next.js.mp4

04:40

01.03-main project overview.mp4

03:32

01.04-environment and tools.mp4

03:50

02.01-creating a next.js app.mp4

07:05

02.02-pages and routing.mp4

07:56

02.03-next link and router.mp4

05:47

02.04-head tags and layout.mp4

09:15

02.05-s header and footer.mp4

07:37

02.06-custom 404 page.mp4

04:21

02.07-module aliases with jsconfig.mp4

03:10

02.08-showcase component.mp4

04:38

03.01-api routes.mp4

09:54

03.02-getserversideprops and getstaticprops.mp4

09:50

03.03-displaying events.mp4

10:03

03.04-getstaticpaths.mp4

08:27

03.05-single event page.mp4

08:54

04.01-strapi cms setup.mp4

06:08

04.02-cloudinary for images.mp4

04:45

04.03-event content type.mp4

11:18

05.01-connecting to the strapi api.mp4

08:04

05.02-search page using filters.mp4

08:32

05.03-search component.mp4

05:19

05.04-add event page.mp4

11:23

05.05-event submit and react toastify.mp4

08:43

05.06-create a slug.mp4

03:29

06.01-delete events.mp4

03:53

06.02-edit event and image preview.mp4

09:56

06.03-modal component.mp4

12:41

06.04-image upload.mp4

12:22

06.05-events pagination.mp4

12:16

07.01-register and login forms.mp4

14:11

07.02-auth context.mp4

14:53

07.03-our jwt strategy explained.mp4

05:28

07.04-login and get jwt.mp4

14:24

07.05-store jwt in server httponly cookie.mp4

05:50

07.06-persist logged in user.mp4

07:23

07.07-logout and destroy cookie.mp4

04:04

07.08-register user.mp4

05:08

08.01-custom user events endpoint.mp4

07:36

08.02-getting user events for dashboard.mp4

05:03

08.03-display dashboard events.mp4

08:59

08.04-create is owner policy for events.mp4

06:39

08.05-associating events with users.mp4

04:44

08.06-authenticated edit delete and image upload.mp4

09:02

09.01-add map to event pages.mp4

12:17

09.02-strapi backend deploy-heroku.mp4

16:40

09.03-next.js deploy-vercel.mp4

11:47

10.01-project introduction.mp4

03:00

10.02-markdown-what and why.mp4

04:10

10.03-markdown crash course.mp4

06:37

10.04-next.js and tailwind css setup.mp4

06:08

10.05-layout component.mp4

05:19

10.06-header and tailwind styling.mp4

09:20

10.07-about and 404 page.mp4

06:37

11.01-blog post markdown files.mp4

03:50

11.02-get posts and parse frontmatter.mp4

08:04

11.03-display posts.mp4

13:52

11.04-sort posts by date.mp4

03:27

11.05-category label component.mp4

06:53

11.06-generate static paths and single post data.mp4

10:06

11.07-display single blog post.mp4

08:09

12.01-start pagination-generate paths.mp4

09:17

12.02-fetch paginated posts.mp4

05:09

12.03-pagination links component.mp4

09:17

12.04-category pages.mp4

13:34

12.05-clean up get posts.mp4

06:23

12.06-category sidebar.mp4

11:20

12.07-next export and limitations.mp4

06:02

13.01-how search will work.mp4

02:48

13.02-search component.mp4

04:59

13.03-search api route.mp4

09:37

13.04-search results components.mp4

09:17

13.05-first deployment.mp4

03:12

9781801814706 Code.zip

Description

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

More details

User Reviews

Rating

average 0

Total votes0

Focused display

Next JS

Brad Traversy

Instructor's Courses

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 like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.

PacktPub

View courses PacktPub

Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.