Create your own Next.js Starter Template

[@syntaxfm]

Here are the main sections you can skip to, see the description for the full timestamps: 01:36 Existing Starter Kits 10:08 Code Style / Editor Settings 33:12 Tailwind Component Libraries 39:08 Set Up NextUI 01:05:58 Typesafe env Setup 01:13:43 Next.js Authentication Options 01:15:37 Next Auth Set Up 01:38:14 Database Libraries 01:40:25 drizzle set up 02:10:53 Next.js Server Action Libraries 02:13:10 Building a Simple Guestbook Next.js CLIs, Starter Kits, Templates, Toolkits and Wrappers | gist.github.com/w3cj/4fa5180fec37ececf0fceec0e3fcc8ab View the code here: github.com/w3cj/next-start

[@cant_sleeeep]

this guy creates very useful yt videos

[@mamlzy]

for real, CJ is awesome

[@colyndev]

CJ is one of the good humans we need more of. Thanks CJ!

[@mushoodhanif305]

Starting from 10:08, everything you did, blew my mind! thanks dude!

[@martinsherry]

this is a fantastic video with so much rich content. i would love this guy to do a cursor + replit/vercel video building on this.

[@Sezar_SZ]

WHAT A VIDEO! I learned A LOT! Thank you so much CJ 🔥

[@StephenRayner]

Need a video like this but for unit (vitest/jest), integration (vitest/jest/MSW) and e2e (Playwright) testing. Probably contract testing too (pact)

[@zapphoddbubbahbrox5681]

wow.. that was exhaustive! i guess you getting your terminal coffee by the gallon. thanks!

[@colyndev]

When you created a type for "theme" which comes from useTheme as either string or undefined, just because you forced it to use your custom type does not mean it won't still be undefined. It seems you may have just hidden a potential bug only by telling typescript to be quiet about it.

[@syntaxfm]

theme will only be undefined when running on the server. On the client, the next-themes library always uses a fallback value: github.com/pacocoursey/next-themes/blob/main/next-themes/src/index.tsx#L208

[@St0rMsk]

🤯of a video as always. Just a quick question: Do you need to add the around {children} in the root layout? Isn't it automatically added by the loading.tsx file? for any page

[@syntaxfm]

Yes good catch! In this case the component in Layout is unnecessary. The next.js docs say: "In the same folder, loading.js will be nested inside layout.js. It will automatically wrap the page.js file and any children below in a boundary." nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states

[@РодионЧаускин]

Wilson John Thomas Shirley Lewis Barbara

[@WesBos]

MONSTER video. Nice job CJ!

[@williamschafer4583]

Whenever CJ drops a video, I always learn something new. His way of explaining things is super clear. Keep it up!👏

[@dtlvan]

Waooo ❤ How about payments, queues, events notifications ... as you mentioned in start of the video?

[@vishalsss123]

Always felt so proud to be follower of CJ, and he mesmerises me every time I watch his content. Favourite content creator & developer who pushes me to learn something new with a in-depth knowledge and teaches how to start & develop an application properly.

[@heyjitendra]

Another banger from CJ. Quite informative and easy to understand. Thanks CJ and Syntax

[@jrcologne2663]

1:42:58 You did reveal your Google client credentials at this point in the video and multiple times after that entirely. Hope you're aware of this. 😅

[@syntaxfm]

Yes thank you! Eventually I realized I'd have to show the .env file - credentials have been deleted.

[@Rajesh-rg6fw]

Can you tell me which is better: Auth.js or Lucia Auth? Or do you have any other recommendations? I'm planning to use it in production and need long-term support because I don't want to change it frequently.

[@bibblebabl]

Huge thanks for the content! ❤ Except semi: true 😂😜

[@Deus-lo-Vuilt]

Like and subi , thanks 😊

[@obensunday]

This is superb! Can you talk about multi-tenant routing (subdomain/custom domain), image optimization/handling...

[@Divyv520]

Hey Syntax , very good video ! I was wondering if I can help you with more Quality Editing in your videos and make Highly Engaging Thumbnails which will help your videos to get more views and engagement . Please let me know what do you think ?

[@l_i_t_108]

bro, I am just starting out to be good in frontend, your vid is the first one I am watching after basic html and css and js stuff, this is so easy to understand. thanks a ton for your effort.

[@lukemelnik]

Thanks for another great video CJ! I'm curious what you think the best procedure is for applying migrations to the prod db? I'd also love a vid on securely self hosting a postgres db 🙏

[@TedDaddin]

Awesome video! Would love it if we got a fullscreen window in the future since a lot of the text would get cut out. Thanks for a great video CJ!

[@louisv9447]

Wow. I don't think I have ever learnt so much in 24 minutes. Excellent video 👏🏻

[@abdulhajiyev]

Thanks for useful and informative video! How are you adding emojis to commit messages ? Are they automatically added or you type them in commit message ?

[@jafffar5885]

Great video, highly appreciate your work, Kindly request you make similar video for vanilla react with vite

[@darawan_omar]

Hey man what are you did that is useful and great you are the best, this is one of the best video I have ever been seen

[@gynflo]

It's more than complete! Thank you

[@status-200-ok]

I leave like and sub, it's an excellent content, I'd like you go up like this

[@juniorgarcia3595]

Thanks for choosing NextUI 🚀 -- Creator here

[@syntaxfm]

Thanks for making it!

[@whatinquest]

Hey, CJ. Thank you for this valuable tutorial. I learnt a lot about decision making and code-setup. I had a query related to session storing in DB. Is it good to have a table for sessions in the database? As an application scales there will be drastic upthrust in session information with increasing traffic which might take a toll on the database (too many write or read operations). Also, the workaround for the strategy change from 'jwt' to 'database' probably can be mitigated by using next-auth callbacks. I'm not too sure though, it'd be great if you can verify for us learners in a part 2 of the same. Much thanks 👾✨

[@syntaxfm]

Yes you are right, sessions stored in the DB will need to be looked up on every request. In other systems I have built, I have stored the sessions in an external cache database like Redis so the lookups are fast. This should be possible with next-auth using a custom adapter. I chose not to use the 'jwt' only strategy because there is no built in way to revoke tokens. A secure jwt implementation would need to provide this (lookup revoked tokens during token validation, or use a token version to know if a token is still valid) since tokens cannot be revoked on their own, they only have an expiration time. I'm not sure if next-auth callbacks can provide the same functionality as middleware 🤔 - would be worth looking in to. This article from authjs talks about the problem with middleware - authjs.dev/guides/edge-compatibility#middleware

[@w3mw]

Amazing video, but I have a problem, I created the way you started with next js aswell vith npx create-next-app@latest. But my eslint dosent show the error as in the video, like when you writing console.log(process.env.DATABASE_URL) for ex, after you fix with eslint file, process.env will have a red underscore to show something is wrong, it dosent on my end. What can be the problem?

[@syntaxfm]

Things to double check: Install the "eslint-plugin-n" plugin if you have not yet: www.npmjs.com/package/eslint-plugin-n Make sure "n" is listed in the list of plugins: github.com/w3cj/next-start/blob/main/.eslintrc.json#L3 Make sure the rule is enabled: github.com/w3cj/next-start/blob/main/.eslintrc.json#L9 You might need to restart vs code after updating your eslintrc - (CMD+SHIFT+P or CTRL+SHIFT+P) search for "Developer: Reload Window"

[@SachinYadav-yx1rc]

Coding garden with CJ❤

[@rence9522]

can you make also in nuxt

[@xcrap]

Wow, this is nuts. I felt like Next was on another level, but it feels like patching CSS hacks in the 2010s for IE/Firefox, when nothing worked straight out of the box. It was more like… yes, but… lol. Great video explaining the whole process, but it feels like a nightmare because you’re not really working on the product; you’re just tweaking and trying to integrate the packages. Congrats on your great videos and best luck :)

[@Website_TV_1]

This is exactly what I needed! Building a custom Next.js starter template saves so much time for future projects. Thanks for breaking down each step clearly and explaining why certain configurations are important. Looking forward to experimenting with this setup! 🙌

[@dirtbagmoto]

I’ve been a web dev for 15+ years and always learn quite a few new things from your videos. Thank you! 🍻

[@the42nd]

Wow this is a goldmine of value and experience! And read minds by putting your base branch in there. Epic share. Subbed.

[@kiwaikos]

ok, I'm totally subscribed. this was fun to watch, and also learned so much! thank you man!

[@laduniestu]

I just saved a lot of time after watching your video. Can't wait to see your next video about building a real project with those boilerplate!

[@josealfa04]

How can I do to don’t love that guy?? ❤❤ I love CJ tutorials and I miss self-host series!!😢

[@mehmethanifierenler3612]

very very thanks

[@pulpml]

Prisma Homepage says trusted by teams at Syntax 🤣

[@syntaxfm]

Prisma is great! We use it on syntax.fm

[@deyonyt]

Earned my sub after the beautiful coolify video. Thank you man

[@dawidstolarski6823]

That feeling when Wags from Billions drops another "how to code" video on yt ♥

[@reinhard_silaen]

Thanks, but you should add email password authentication too

[@sun33t]

Thanks for taking the time to put this resource together CJ. It's absolutely brilliant 👍

[@prashlovessamosa]

Cj thanks for sharing indeed very helpful.

[@brayanyevenes5954]

Is it possible to share the presented excalidraw?

[@syntaxfm]

excalidraw.com/#json=7apmPAJYqjLmN2-WSkjHf,3wfAsRZh844VXWCYhH2CFw

[@MuneebR7]

woah its better then most of the premium courses out there. sick content. Keep it up.

[@altermunmis]

Amazing content! 👏👏👏 thanks for sharing it!

[@emilianoferreyra8221]

Gold ❤

[@DontFollowZim]

Even though, I'm a Vue/Nuxt guy, I love watching this stuff because there's always something I can take away from it. I know you like Vue, so maybe we'll see something for it or Nuxt some time? Or do you want to keep making sure you're hitting the largest audience possible by sticking to React stuff?

[@StephenRayner]

BiomeJS!

[@browntigerus]

Great video! Thanks.

[@jonathankurtis]

insanely good. mooaaar, please!

[@ebratz]

Thanks CJ! You ROCK!

[@bunyaminerdal2478]

awesome video

[@freakinfocus]

Hey! Whats the name of this vscode theme?

[@syntaxfm]

It is called "Just Black" - you can see me go over all of my settings here: kzbin.info/www/bejne/bmbUanmKmbusgNU

[@freakinfocus]

@@syntaxfm Thanks a ton!

[@VK-xw6ky]

More CJ!