In part one of using WordPress as a headless CMS with Next.js, we looked at the basics of setting up a WordPress instance so that we can access P...
For further actions, you may consider blocking this person and/or reporting abuse
This write up is super detailed and an awesome source of info thanks for sharing. I have one basic question. When I want to publish a new post or page from Wordpress, normally I just hit publish and it would show up when I refresh the blog posts index page on my server based wordpress site. What happens with next.js? What would I need to do in order to publish posts weekly using the Wordpress scheduler for example? Would the new post just show up in next.js when I hit refresh? I'm guessing not since its statically built.
Thanks again,
Spencer
Have you solved this yet? I need to publish more posts without touching my Next app.
I've only read that you can have wordpress fire a webhook that will tell Next.js to rebuild when you publish a new post. I read that from a post that was about a year old, so maybe there is a newer more streamlined way.
Dang, this might've been important to make note of in the article. Clearly I'm not an active blogger, as I built and published my blog a couple of months ago and I'm just now getting around to asking this, but I guess it's a learning experience.
Yea after reading @AndrewRoss comment below, It sounds like the future proof solution to git/webhooks. I would have a look through that.
Thanks, I'll check it out.
If you are hosting your NextJS site in vercel/netlify, the incremental static generation feature should be able to facilitate your needs as the page will be built again in the background when a new request comes in, you only need to add a simple " revalidate: 1" in your getStaticProps function
nextjs.org/docs/basic-features/dat...
I am hosting on netlify, and I've been hoping there would be a faster solution than adding Apollo. I'll check this out, thanks.
@logantai24 Thanks, it worked!
Hello, thank you for writing such a detailed Article. I am having trouble getting up and running after adding the new directories and files above. When trying to view the posts on the /blog page at the step titled 'Checking the output' I am getting the following error after following the "blog articles page" link.
Screenshot: dev-to-uploads.s3.amazonaws.com/i/...
EDIT1:
I was able to get it working buy adding
before
Is this correct?
This is correct.
Thanks for this article, I've learned quite a bit!
Here are some details that might have seemed obvious to most people, but took work and mysterious errors for me to figure out:
Both of these were because I was using my own WordPress instance, maybe people who were using your information while following along didn't receive the errors.
Thanks again!
Thanks for this mate! I actually had the issue with the 2nd point.
Great article Rob! I've been using Headless Wordpress for a couple of months now and thought I should mention that one of my absolute favorite features is stable "revalidate" on getStaticProps. Background incremental static regeneration is a game changer, seamlessly threading the headless WP server with the client in production. No githooks required
(transitioning to @apollo/client is a work in progress)
nextjs.org/blog/next-9-5#stable-in...
Thanks Andrew and so pleased you like the article. Yes, thanks for highlighting this. It's a feature that's definitely worth people checking out as it is indeed a game changer.
First of all, thank you for this wonderful tutorial. I did my local installation connected to a wordpress installed on my server at Godaddy. When calling the blog page displays the error that is in the print.
I had a similar error in WP-headless with Gatsby locally did not display the Single Posts, but when I deployed on Netilify the posts were called.
Can you help me please?
Erro:
);
45 |
Great series to fast test WPgraphql and Nextjs. I have just one question.
Is there a way manipulate data set with
dangerouslySetInnerHtml
?For expamle in the article is present a slider of image, on Next that slider will not be rendered properly (the gallery of gutemberg editor is show as a simple list)...
First of all, thank you for this wonderful tutorial. I did my local installation connected to a wordpress installed on my server at Godaddy. When calling the blog page displays the error that is in the print.
I had a similar error in WP-headless with Gatsby locally did not display the Single Posts, but when I deployed on Netilify the posts were called.
Can you help me please?
Hi there,
when I go to my site/graphql I get the following error:
GraphQL Request must include at least one of those two parameters: \"query\" or \"queryId
Does anyone know why? I can't really go any further until I can access the data!
Thank you
Do it like this:
{sitename.com}/graphql?query={stuff that's in your graphiql query}
For example, to get all posts of a specific category:
query={category(id: "asdfh3e2"){posts{nodes{title}}}}
Play around with the GraphiQL IDE to find out the queries that go inside /graphql?query={}
I had same error before because I use GET in stead of POST.
If you use POST, then you should recheck your query string ( must start with: query ... )
Outstanding article! Thank you so much Rob for this detailed guide.
I did everything according to you blog and it works great on the local machine. I can read articles. However, I have a problem when I deploy it to vercel. It shows an error during the build time:
And my getStaticPaths function looks like you described it:
What might be wrong with deployment if it works fine locally and I can build it locally?
Ohh, I forgot to add global env for WP blog hehe. It works now. Thank you so much for article. It's brilliant!
This is a great article. Thanks for sharing. I originally used Next.js for my website it was so fast and snappy. But then I got sick of managing the content manually, so I move to WordPress. I love WordPress for its ability to build pages and content easily, but I have missed the Next.js install for its performance. Now I'm looking to combine the two to get the best of both worlds. Your guide has been great in helping achieve this.
A little problem though. I note the output for the post/page content includes shortcodes. Is there a way to deal with these and turn them into plain HTML for use in Next.js? I use the DIVI theme on my site now and it builds great looking pages, so it would be helpful to convert these to HTML and reuse them.
I came across this issue with shortcodes myself. I am not sure if this is exactly what you means, but it allows me to turn shortcode style snippets into NextJS React Components: robertmarshall.dev/blog/using-word...
Hola Ron, Excelente articulo! Todo me funcionó a la primera :D.
estuve investigando un poco y tengo una duda ¿Por que usar la propiedad "dangerouslySetInnerHTML"? ¿Es recomendable en este caso? ¿eso no dejaría una vulnerabilidad del tipo "xss"? en tal caso ¿Que nos recomendarías?
if your URL yourlink.com/graphql/ is getting a 404 error and you can't run your content on the blog page. Try to change your WordPress Settings > Permalinks to "Post name"
Has anyone run into this error?
Error: Failed to fetch API
I get a status 200 but nothing is returned.
Never mind. I t turns out that I was querying for the extraPostInfo but I never made in ACF. 😳😅
Wow. Great article. Done a similar thing with Nuxt and Gatsby, so a lot of familiar principles here. Since I'm exploring Nextjs now, will give this a go.
Thanks Tom, best of luck with your project :D
how can we add pagination to the blog page and "Next" "Previous" buttons to single posts?
Do you have soft code?