Build and Deploy a Next.js, Headless WordPress Blog with Tailwind CSS, DaisyUI and Vercel - 1. Setup

[@LearnFrontendNow]

So it's been quite tough to do any real long form content since moving house but being more settled now I feel we're in a better place to provide everyone that's joined us recently with new frontend content! I hope you enjoy, it's more likely going to be a 3-4 parter in total. Look forward to all the amazing blogs that come out of this, good luck making yours and enjoy the series everyone! 🍿

[@grobknoblin5402]

I have been pulling my hair out trying to make this work this is the first tutorial that didn't leave me completely stuck! You have given me so much motivation honestly I was so close to giving up before this I finally have something that works! You are my hero! cant wait to watch all your vids!!!!!!

[@LearnFrontendNow]

I don't think you realise how big a comment that was for me. I'm genuinely so happy for you and that you feel that way. I'd honestly hate it if anybody came to any of my videos and felt like giving up on dev. Though this comment really made my day and it's exactly why I make these videos. I hope you stick around and see everything that's coming and enjoy the rest of the series! Hope your project turns out well

[@mariusorani]

Same here! I was stucked in Faust.js where nothing works as it should! This vid gives me hope to not give up!!!

[@MattBristowCoding]

This is really informative and comprehensive, it’s giving me the itch to rebuild my site!

[@LearnFrontendNow]

Thanks Matt, go for it! 👏😄

[@oli-9609]

Hi ! Thanks for the video ! Would you know how i could deploy this to a vps ? Thanks in advance !

[@roloep85]

Hi, is this solution limited to Vercel? In other words can the Next.js App be deployed on any hosting platform and the WordPress on another host? Also would this mean the WordPress CMS pages would not be part of the website?

[@saurabhrai738]

Thanks a lot for this tutorial!!

[@LearnFrontendNow]

Not a problem, happy you liked it :)

[@thepatientgamer59]

`next/image`, hostname "example.com" is not configured under images in your `next.config.js` I am getting this error

[@adamgrover9481]

I had the same issue. I had to update this section in the next.config,js for it to work /** @type {import('next').NextConfig} */ module.exports = { optimizeFonts: true, images: { remotePatterns: [ { protocol: protocol.slice(0, -1), hostname }, { protocol: 'http', hostname: '**.gravatar.com' } ], minimumCacheTTL: 15000000 }, };

[@pankajwp]

Why app directory is not used ?

[@LearnFrontendNow]

Hey Pankaj, thanks for watching the video! At the time of me making this tutorial I wanted to make it as simple as possible for the user. The app directory leans heavily on the server side and despite what Vercel says is quite experimental still (a lot of drama surrounding that). The src directory however works with this project on the client side better and also is better for the size of this tutorial that I had planned (2-3 videos). My latest tutorial (E-Learning platform) is full stack and _IS_ using the app directory ;) Also you could easily use the app directory for this tutorial, it shouldn't make that a large a difference as we aren't using things like next auth or things that may change in the app directory. I hope that helps explain why :)

[@pankajwp]

@@LearnFrontendNow Exactly lots of confusion using app directory. I am still in confusion what to prefer . As soft navigation does not fetches latest data from server in app directory

[@LearnFrontendNow]

@@pankajwp absolutley and the worst part is the documentation isn't very helpful from Vercel right now and like yourself + me a lot of people are left confused. Best thing to do for now because React Server components and the NextJS App directory is still quite experimental is to use the NextJS Src directory for a little while longer until things improve. Depending on what you want from the project of course :)

[@notafoofighters]

You know what, your screen too big, so what on your screen look too small in this tutorial video. Better if you make a zoom what in your screen so in this video what you code look bigger. The one that really clear to watch is you and your microphone in the bottom right. I hope that advice make your video better since your content very valuable for people like me. #ReallyVeryBigThanks #OiOi!

[@LearnFrontendNow]

Thanks so much for that valuable insight. I always love feedback on ways to improve the tutorials and I think that's a great set of points. Definitely need to make sure that not only the browser, the resolution, the code editor and the terminal are readable for everyone. I'll definitely take that onboard with the newer stuff! I hope you enjoy the rest of the series my friend ;)