Next JS & WordPress: Build rapid NextJS sites with Next & WP

سرفصل های دوره

Learn Next JS & Headless WordPress & build a fully functioning real estate property website with Next.js & WordPress

1. Introduction & Setup

1. Important Read this before you begin this course.html

2. Course intro & site demo

3.1 plugins.zip

3. Set up WordPress locally & plugin explanation

4. Set up Next JS + first query for WordPress data with GraphQL

2. Building the first pages

1.1 zac-gudakov-fh3zldsy4z4-unsplash.zip

1. Create homepage + query for gutenberg blocks

2. Create the BlockRenderer component & clean block data

3. Cover component, style with Tailwind CSS, & render images with Next JS Image

4. Create a WordPress child theme & modify theme files

5. Create heading component, util functions, extend tailwind, and inner blocks

6. Create additional pages & child pages in WordPress & dynamic routes in Next JS

7. Query for page data using GraphQL from page components & getStaticProps

8. Create Paragraph component & further extend WordPress theme

9. Finish Paragraph component & mapping anchor tags internal links

3. Creating the main menu

1. Create the Main Menu options page with ACF (part 1)

2. Create the Main Menu options page with ACF (part 2)

3. Query and clean menu data in Next JS

4. Create the Menu component in Next JS

5. Finish the Menu component

6. Implement the CTA button in Main Menu

7. Create ButtonLink component & using the @apply Tailwind CSS directive

8. Refactor Page components

4. Advanced Gutenberg blocks

1. Create the CTA custom block with ACF blocks

2. Assign fields to the CTA block and create block preview

3. Create the CTA component in Next JS

4. Implement columns with Gutenberg blocks

5. Rendering Column components within Columns + handling Image blocks in Next JS

6. Reusable blocks

5. Property pages

1.1 property data.zip

1. Create custom fields for the property pages

2. Create the property pages in Next JS

3. Implement post featured image as Cover component background with React Context

4. Create post title component

5. Create the property search custom block

6. Create API route for property search

7. Rendering property search results

8. Create pagination UI

9. Handle pagination in search API

10. Create the search filters UI

11. Query preview & add local state for search filters

12. Implement filters in search API

13. FIX URLs when searching

6. Deploy to production

1. Push code to github

2. FIX page generation ready for deploying live

3. Deploy WordPress & Next JS app live

4. Automatically rebuild when data changes in WordPress

7. BONUS

1. BONUS!.html

45,900 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training