NextJS and WordPress Headless CMS Crash Course.
Вставка
- Опубліковано 1 бер 2021
- Join the Discord: / discord
Join this channel to get access to perks:
/ @james-perkins
Follow me on:
📃 Website/Blog: jamesperkins.dev
👉 Twitter: / james_r_perkins
👉 Linkedin: / james-perkins-268992a4
👉 Github: github.com/perkinsjr
👉 Discord : / discord
---
Need 1:1 mentoring?
Want to Donate?
Want to do business?
snugg.me/snuggery/?id=AGZ8lAi...
-- - Наука та технологія
Want to get access to my videos early? Want to learn what is happening before everyone else? Consider the membership option for my channel
ua-cam.com/channels/-zet8Eyyy-OUE_fmocp3Wg.htmljoin
This is an excellent video explanation. Thanks and keep it up !!
The interrupt message made me subscribed lol
Success!
More of this please! 🙏
Thanks
Thanks!
this is really great tutorials..thank you. could you make next js with shopify store front. I am sure many people will love it. once again this is awesome
Sure let me add it to the list!
My first thought: "WHAT? Next.js and WordPress together??" :)
Yo, James, great video! Do you have any content about basic pagination with that (or similar) structure? Thanks for sharing your knowledge with us!
I don’t currently but it’s on my list of content
min 31.22 - Where does the PostIdType come from??
Hi James, I have a question.
Im assuming you upload the nextjs frontend and set the dns to your main domain name. What happens if a user finds the wordpress api url and tried to access the frontend. How do you prevent the frontend from showing?
You can just create a Wordpress theme that redirects the website back to your NextJS website.
A good thing example found in this thread
wordpress.stackexchange.com/questions/17969/disable-front-end-to-use-as-cms-only
Thanks for the tutorial! Still have a one question. How to protect WP endpoint that only you could fetch data from it? Thanks for your response.
Since WPGraphQL is a WordPress plugin that adheres largely to common WordPress practices, there are many ways to make authenticated WPGraphQL requests.
For remote HTTP requests to the /graphql endpoint, existing authentication plugins should work fine. These plugins make use of sending data in the Headers of requests and validating the credentials and setting the user before execution of the API request is returned:
github.com/WP-API/Basic-Auth (even though it's labeled for the REST API, it works well with WPGraphQL - but not recommended for non-SSL connections)
github.com/WP-API/OAuth1 (labeled for use with the WP REST API, but works well with WPGraphQL)
github.com/wp-graphql/wp-graphql-jwt-authentication (This is still a bit of a Work in Progress. It works great, but the shape of requests, etc is still evolving a bit. Stay tuned for it to reach stability)
If the remote request is within the WordPress admin, such as the WPGraphiQL plugin, you can use the existing Auth nonce as seen in action here: github.com/wp-graphql/wp-graphiql/blob/master/assets/app/src/App.js#L16-L29
Thanks for your efforts !!!One question.. how to do slug category for categories or post tags.?
Go to your GraphQL IDE in WordPress and you should see categories as one of the options and then build similar queries as the post one.
hello , i just wanna know i hosted my nextjs on vercel and added my domain to it soo but when i go to mydomain/wp-admin it shows 404 page as if am going to a nextjs page i also find that vercel does not use htaccess so how can i fix this ?
You’d need to deploy your Wordpress app somewhere then prefix the domain e.g wordpress.domain so then you can access from wordpress.domain/work-admin
Great video sir
One question can u plz make a video on how to do authentication and protected routes as well with wordpress and nextjs
Loved this crash course 👌
I can add it to the list but in the meantime
www.wpgraphql.com/docs/security
Hello, thank you so much for the video! Trying to make it happen here, but I'm getting an "error establishing a database connection". Tried to google for an answer, but nothing solved for now. Is it with the WP_URL or maybe something with the GraphQL endpoint (where can I see it, by the way)? Currently, I just finished the fetcher and will try to keep doing the next steps.
If you have your Wordpress instance you should be able to access it by going to the admin and clicking the GraphiQL IDE" button in your WordPress Admin Bar.
@@james-perkins Thank you, solved it! I'm getting another issue now: at 21:49, you used blogPost.excerpt and I did exactly as it's in the video, but it says "ReferenceError: blogPost is not defined" when I try to see the results at localhost:3000/blog. Tried to find something at GraphQL to solve it, without success. :(
UPDATE: solved using posts.map(post, blogPost) instead of only (post). Not sure if it's right to do, but it worked.
Hi! Great Tutorial. I have a problem. I am using graphql to obtain the navigation menu, if I do the query with postman it returns the information but when using the fetcher function that you show in the video it is returning me undefined reading map. Do you have an idea why I get that error?
Hmm not exactly sure. Have yo tried adding a console.log to the fetcher to see what gets returned?
I ran into the same issue. According to the documentation, getStaticProps only work within the page component. See nextjs.org/docs/basic-features/data-fetching/get-server-side-props
I’ll be interested in what you find as a solution! Thanks 🙏
This is very helpful! Is there a repo where I can download the sample code?
Hi Richard, sorry forgot to put the repo up github.com/perkinsjr/wordpress-headless-next/
Hi James, I'm blocked at the final step because of a server error : TypeError : Only absolute URLs are supported, source is : line 4 of fetcher.js , any idea ? Thanks
Did you check the repository found here: github.com/perkinsjr/wordpress-headless-next/blob/main/lib/fetcher.js
That URL should be the full WP API
Same issue - cant seem to figure it out obviously its want the full refering URL to the graphql end point but doesnt seem to work using either http or https - only thing i can think it my local xammp install isnt supporting https... hmm any ideas?
After some WP installation issues, I tried to restart the project from scratch and I'm getting the same issue. :(
Excellent video, James! I’m going to try this out for sure.
Can you paste the link to the repository?
I can github.com/perkinsjr/wordpress-headless-next
But honestly if you want Wordpress headless I’d say use Colby’s starter github.com/colbyfayock/next-wordpress-starter
It’s up to date
@@james-perkins Thanks again. I'll check that out!
Hi! Why you did not include the featured image on how to display it, that would not be that simple for the beginners,
may be the most dumb question you have ever seen. but do i upload the index.js + all the other files to my FTP and then "Boom" im running the headless wordpress from there?
Not a dumb question at all!
Actually you run the Wordpress instance separate from this code. This code would need to be deployed to Vercel, AWS or Netlify for example
How to use next/image with posts?
You should check out Colby’s starter it’s much more up to date than this video. A lot is done for you github.com/colbyfayock/next-wordpress-starter
dont we need , apollo graph ql client for this ?
No you don’t
Hell so many typing text... There's no something simple like WordPress but in js???