How I Setup My NextJs Projects From Scratch

In this video, we'll set up NextJs from scratch and create a starter template we can clone and use in every project.
👉🏼 The Ultimate NextJs 14 Course
→ www.hamedbahra...
👉🏼 Project source code
→ github.com/Ham...
👉🏼 Work with me
→ www.hamedbahra...

[@flnnx]

I am new to NextJS and love how minimal effort you have to put to setup things and start with your project.

[@hamedbahram]

Absolutely!

[@markamos5139]

Best thing the algorithm fed me today! Thanks for sharing your process

[@hamedbahram]

Awesome! Glad to hear that!

[@ahmaat19]

Thanks for sharing us the knowledge

[@hamedbahram]

My pleasure!

[@SergioEstebitan]

I love the typography in your code. Could you let me know which font family you're using and if it includes any special ligatures?

[@hamedbahram]

My font is Operator mono, and I think it supports ligatures.

[@tekemutau6583]

Hi Hamed, I really enjoyed your video on setting up Next.js projects from scratch! I'm curious about your thoughts on remote job opportunities for Next.js developers. Do you think it's feasible to find remote work in this field, and if so, do you have any tips for aspiring remote developers? Thanks!

[@hamedbahram]

Yes, absolutely! I have seen openings literally looking for NextJs engineers. My suggestions is to learn the ecosystem of techs around NextJs, built a portfolio website for yourself showcasing, sharing what you've learned and then find companies you'd be interested in working for and reach out to them.

[@user-ju4om6un8q]

Easy with you. Thank you!

[@hamedbahram]

Glad it helped!

[@ilan117]

Hi Hamed. Always, thank you ❤ I guess you install prettier as a dependency in case the extension in VS code is not installed or the user is using another IDE ? … Last question what is the best way to reuse the template and keep the dependencies up-to-date e.g. nexts version.

[@hamedbahram]

My pleasure! Yeah that's right! You just have to keep the template you created up to date.

[@amjadnikzad4890]

i think if you make a video about github and github workflow,that would be great!

[@hamedbahram]

That's a great idea! Thank you.

[@NijatNiyazov]

Does it automatically deploy to vercel new repo which was created by using this template?

[@hamedbahram]

Once you add the repo to your own vercel project, it will automatically deploy when you push new changes.

[@NijatNiyazov]

@@hamedbahram thanks. Btw, your all contents are priceless. Keep it up 👍

[@hamedbahram]

@@NijatNiyazov thank you!

[@hamidr8391]

Pls make a video on best folder structure practice in next.js for large scale applications.

[@tejasgk369]

Yeah like mono repos and all

[@hamedbahram]

Sure, I'll have that in mind. Thanks for the suggestion!

[@git-sujon]

What about the max-width? how much max-width you keep for the larger screen and shouldn't it add with the container class?

[@hamedbahram]

The "container" class already applies max-width based on different screen sizes. See here → tailwindcss.com/docs/container

[@git-sujon]

@@hamedbahram thnak you for the reply 💝, I forgot about the default class of tailwind.

[@hamedbahram]

@@git-sujon no worries.

[@aminda6862]

thanks a lot
but What setup do you have for React projects?

[@hamedbahram]

Hmm 🤔 It's been a long time I haven't build a React project outside of NextJs. But if I had to, I'd use Vite to setup React and ExpressJs for my backend.

[@temitopedavid9508]

Thanks for sharing

[@hamedbahram]

My pleasure!

[@muhammadalifdanielbinmohdh3188]

Hey can you make an indicator of database is online or not by using prisma?

[@hamedbahram]

What do you mean by the database being online?

[@muhammadalifdanielbinmohdh3188]

@@hamedbahram like vercel status that check are database is connected or not