Next.js 14 Course for Beginners (Strapi 5)

[@LearnWebCode]

Huge shout out to @CodingAfterThirty for helping me with some of the Strapi boilerplate in this video. Also a shout out to @frontendfyi for inspiring my CSS strategy to position the footer at the bottom of the layout.

[@CodingAfterThirty]

Thanks, Brad, for the awesome tutorial! I really appreciate everything you do. Your courses helped me break into the industry six years ago, especially your WordPress course, which got me my first job at a marketing agency that specialized in building WordPress sites. I've been working as a developer ever since, and now I'm a developer advocate at Strapi!

[@fvgoya]

Finally!!! Next.js!!!! Really nice to see you creating this content. Next one: Next.js and Type Script. Thank you Brad!!!!!!!! You are awesome man.

[@iambhavinpatel]

Wow, The lord Brad is back with amazing course Next JS... ❤❤ I am super excited 😊😊

[@tiagomilitao]

Thank you very much, Brad! This is by far the best Next.js 14 + Strapi video on KZbin!

[@kerrykreiter445]

Your content is incredibly amazing and super helpful. I am really loving Next!!! Thank you so much!!!!!

[@jimmaccormaic6689]

Yet another superb tutorial from Brad The Master!

[@philamadondo]

Thanks Brad for such an amazing quick course on Next.js and Strapi - I've certainly learned a lot!

[@Strapi]

Nice video. Thank you for all you do Brad.

[@elikemdaniels7806]

I'm excited to see this. Wow! Brad, I have a humble request. If you wouldn't mind, please make a tutorial on Directus CMS and Next or Nuxt. You and I know WordPress is great, but it just grows on you, making your brain want to try a new CMS with awesome developer experience. I'm sorry of this is too much to ask for, but people like me wouldn't mind buying it if it's a paid course. Like Strapi, Directus is also an amazing CMS. 😁

[@_maurodf]

I think that some content on Vue/Nuxt by Brad would be awesome! @LearnWebCode

[@alvinmasievi3757]

Great and streat forward, thank you Brad!!!!, Good content

[@JEK5190]

Thank you brad! I always watch your videos here on yt and udemy. Hope I land a job soon!

[@sidds09]

Very helpful. thanks a lot. hoping for more projects on nextjs.

[@cholo2605]

Thanks againg Brad!!!!

[@CraigWatson-Coding]

Love this tutorial! I did run into some dependency issues when adding Strapi Blocks and Husky though and wondered if anyone else has come across this issues and how they overcame it?

[@ВасилийКарнеев-р7э]

Спасибо, очень понравилось, повторял всё за вами и получилось.)

[@sagarshrestha1755]

Hey Brad can you setup Wordpress api and make a video on the simple websites that uses cpt and taxonomy and create a simple website using next js and it's deployment as well

[@Rezhwandev]

1st Amazing video 2nd We need a full course ASP Full real life project

[@mdshakibmiadev]

great tutorial ❤‍🔥

[@mikmakmouk2981]

Thank you ! It’s great and very helpfull 🥰

[@abdullaalfaiyaz1890]

Hey Brad. Great video !!! Is there any new course we are getting this year ?

[@OmarAli-gm5lx]

first 58:07 of this video is Gold....

[@lijiachen8888]

Thank you so much for that video it save me a lot, I just have a question which vscode extension do you use to render code directly when do copy ?

[@LearnWebCode]

You're welcome! Do you mean auto-indent when I paste in code? In this video, my app in the browser doesn't use my newest code until I save my changes to a file, but that's just "npm run dev" and your copy should be doing that as well. If you've seen my page update in real time as I type in other videos on my channel, that is the extension called "Live Preview"

[@nohanabilg]

Thank you Brad. This helps me a lot. What do think the best budget option to host (Next js + Strapi App + PostgreSQL db) because render paid tier is not affordable.

[@LearnWebCode]

You're welcome! If anyone has any even better ideas please feel free to chime in; but I'd say any of the cloud VPS companies that offer a $5 a month plan is hard to beat in terms of value. So that includes Linode, Digital Ocean, Vultr and many others.

[@ePilicK_tv]

As always a super Tutorial. Basically I wanted to ask you something, how much difference is there between an approach like yours and one with src? For a larger project, many people recommend using the structure with src, what do you recommend? Thanks in advance Brad!!! U're super!

[@LearnWebCode]

Great question. As far as I know it's 100% just a personal preference folder structure decision. The upside to having a "src" folder is you know everything inside it is your actual code instead of config files etc... the downside to having a "src" folder is it's another layer nested and maybe you don't want that. I'd say there's no right or wrong answer and even no "substantial" differences; just an organizational preference.

[@iambhavinpatel]

2:02:48 Tailwind is all about class names. If you know class names you don't need a CSS designer. 😆😆 right, Brad!

[@iambhavinpatel]

Hi Brad, How do you remember all the names of these Tailwind CSS classes? Please share some tips... Thanks!

[@LearnWebCode]

In this video I definitely had notes to the side of my screen recorder otherwise the video would have been 10 hours long ha. My tips are (1) always have the Tailwind docs open and get used to the cmd (or control) + k shortcut to search for the property you're wanting. (2) Have the Tailwind CSS Intellisense extension installed in VS Code for great suggestions. (3) Try to get as far as you can without looking up the docs, try to go from memory and take a wild guess at a class name and see if it works, over time you'll find that your guesses get more and more and more accurate; if your first two guesses don't work then open the docs and cmd+K search.

[@iambhavinpatel]

@@LearnWebCode Awesome, thank you so much for the help! 👍

[@alaincampos9792]

Hi Brad, thanks very much for this highly valuable tutorial. It is really great. Congrats ! My only problem is that when adding or updating content in Strapi, my app never updates with the new Strapi datas. I could fetch a couple of times at the beginning but then, no more updates / fetching with the Next app. But, I get the new datas in the console when calling the Strapi API on Strapi localhost:1337/API. I really don't know where the issue is coming from. Cleared the cache, tried on different browsers, no changes. Getting desperate a bit. Please, kindly help me. Thank a lot.

[@groovebird812]

Great course, but why souln't we add react to the layout? Every page today uses a lot of client side js, event handling and so on. Did you mean we should include react in every page we need it?

[@LearnWebCode]

Thanks! Thanks for supporting the channel for so many years. Do you mean the question of where / whether to include the "use client" at the top of the file? The creators of Next.js recommend only using that when it's needed. Some pages might not need it, and I believe things can be sped up / use less CPU cycles etc... if no interactivity is needed. People 100 times smarter than myself decided it made sense to make it an "opt-in" feature that you're opted out of by default.

[@marpusik1277]

thanks 🙏

[@thebilalafsar]

Again Next.js why not WordPress?😭 Anyway, seems like a good course, will update guys after watching it completely🙂

[@codernerd7076]

Because WordPress is more slow and not really created as a headless CMS

[@thebilalafsar]

@@codernerd7076 WordPress is slow?

[@alsherifkhalaf7385]

WordPress is already dead

[@LearnWebCode]

Absolutely nothing wrong with WordPress; I actually have several WP projects coming up for the channel. I was just on a Next.js kick because so many viewers had requested it.

[@_maurodf]

​@@LearnWebCode Do u have something planned on Vue/Nuxt? What di u think about those two?

[@theMaroFlow]

Hi, with your deploy setup if we make some new changes on strapi then we need to call function for images and rebuild project again, also put new out folder on server, am i right?

[@LearnWebCode]

Yes, that's correct. I threw together a quick way to get your site online in this video without people needing to worry yet about hosting Strapi, so it's definitely not the smoothest workflow. You could create a script that builds the project, runs the image copy script, and also automate the pushing of the out folder to a Git remote somewhere that's hooked up to a hosted environment. In the real world, you'd want your non-dev clients to be able to make edits in Strapi, so Strapi Cloud or rolling your own affordable VPS that hosts Strapi would be the go-to move.

[@theMaroFlow]

@@LearnWebCode thanks 👍, vps seems like the only good option to me

[@dzanful]

Instead of taking down the entire application and rebuilding it every time content is updated, I prefer to create a custom web hook that triggers cache invalidation on demand using "revalidatePath()" from a protected Next.js route handler, e.g. "/api/revalidate". Revalidating image resources also requires the use of remote images, which don't have to be truly "remote", they can just be served from your web server. This way, you'd still benefit from image optimization and static rendering, with zero downtime.

[@tanercoder1915]

why not in Typescript?

[@codernerd7076]

Does it use Strapi 5, that just came out 😂

[@LearnWebCode]

Yes, this was filmed using the release candidate for version 5 (I believe RC3).

[@CodingAfterThirty]

Yep, Strapi 5 is out, but we had the RC ( Release Candidate ) out for folks to try out early.

[@kpWire]

@@CodingAfterThirty But neither strapi@latest nor RC supports node.js >20.x.x. My Raspberry Pi has node 21.x.x so that prohibits me to complete the great Next.js tutorial by Brad. Sadly. Thanks a lot anyway.

[@CodingAfterThirty]

​@@kpWire lol why are you still using node 21 you should switch to 22. Lol. I am kidding of course. I typically use NVM to manage node versions and that way it is no hassle for me to switch to appropriate node version. But I know Strapi will update to 21 when it make sense. (LTS )