Тёмный

Creating the Category Archive Pages - Next.js + Headless WordPress Blog [part 14] 

Coding Reflections
Подписаться 2,2 тыс.
Просмотров 1,3 тыс.
50% 1

In this video, we will create the category archive pages of our Next.js/WordPress blog. A category archive page displays the posts belonging to that category. We will also implement cursor-based pagination, which gives the users a load more button to fetch more posts.
Git Repo: github.com/iab...
Alternative Git Repo: github.com/iab...
Website: www.coralnodes...
---------------------------------------
Server providers:
Linode: www.coralnodes...
DigitalOcean: www.coralnodes...
-------------------------------------------------------------
Disclaimer:
This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate.
Disclosure:
This video and its description may contain affiliate links, which can earn us commission if someone purchases products using those links.

Опубликовано:

 

15 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 6   
@wilonweb
@wilonweb 9 месяцев назад
Do you make a PDF of this tutorial to remake it from text ?
@vicckuo
@vicckuo Год назад
15:53 why the code different with your github repo? your code: export async function getCategoryDetails(categoryName) { const query = { query: ` query getCategoryDetails { category(id: "${categoryName}", idType: SLUG) { count name slug } } `, }; your git repo: export async function getCategoryDetails(slug) { const query = { query: `query getCategoryDetails { categories(where: {slug: "${slug}"}) { nodes { name slug count } } }` };
@CodingReflections
@CodingReflections Год назад
Thanks for pointing that out! Both methods work, anyway. I have pushed that change to GitHub to match the code in the video. I created the repo before recording the video series. In effect, I coded the whole thing twice - first for the prep and then while recording the video. So, slight changes might have occurred. Also, the next video shows how to deploy it. So again, you can find a duplicate repo in my account with the same code. You can use either. I will add links to both in the description.
@xen.7140
@xen.7140 5 месяцев назад
Try downloading your Github repo, it doesn't work. Fetch failed every time. Also, the "catetory" typo is in the repo as well (fixing it doesn't solve the fetching issue)
@CodingReflections
@CodingReflections 5 месяцев назад
Have you changed the fetch url to your wordpress installation url under lib/graphqlRequest.js? Otherwise fetch will fail because it is pointing to my wp url. If not, you can find the wp backup files in the repo, which you can use to install a copy of the wordpress site on your localhost or remote server. As you said, the typo - "getCatetory" - has nothing to do with the fetching issue since it is only the query name, which can be anything. Anyway, I have fixed it, thanks for pointing that out.
@xen.7140
@xen.7140 5 месяцев назад
@@CodingReflections I tried running it with your URL and then changed it to mine, still fails. The error is always fetch related. The default Nextjs ISR WP blog template works and fetches properly, but doesn't have category archives that I'm trying to add EDIT: Works now! This is the error I was getting: Server Error Error: A required parameter (slug) was not provided as a string received undefined in getStaticPaths for /category/[slug] This error happened while generating the page. Any console logs will be displayed in the terminal window. This is what Github Copilot came up with and it fixed it: "In your getStaticPaths function, you're mapping over categories and for each category, you're returning an object with params that contains categoryName: category.slug. However, the error message suggests that the function is expecting a slug parameter, not a categoryName In this updated code, I've changed categoryName: category.slug to slug: category.slug to match the expected slug parameter." return { paths: categories.map((category) => ( { params: { slug: category.slug } } )), fallback: false, }
Далее
New Race ? 🪽| Doge Gaming
00:12
Просмотров 1,6 млн
How To Make a WordPress Blog - Step by Step
2:14:31
Просмотров 761 тыс.
Next.js 13 and headless WordPress with WPGraphQL
15:29
Make An Amazing WordPress Blog (Step By Step)
1:48:58
Просмотров 213 тыс.