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
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.
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 :)
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.
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
🤯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
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
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?
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"
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
this guy creates very useful yt videos
for real, CJ is awesome
Whenever CJ drops a video, I always learn something new. His way of explaining things is super clear. Keep it up!👏
MONSTER video. Nice job CJ!
CJ is one of the good humans we need more of. Thanks CJ!
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.
Thanks for choosing NextUI 🚀 -- Creator here
Thanks for taking the time to put this resource together CJ. It's absolutely brilliant 👍
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 :)
Another banger from CJ. Quite informative and easy to understand. Thanks CJ and Syntax
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!
That feeling when Wags from Billions drops another "how to code" video on yt ♥
woah its better then most of the premium courses out there. sick content. Keep it up.
wow.. that was exhaustive! i guess you getting your terminal coffee by the gallon. thanks!
Starting from 10:08, everything you did, blew my mind! thanks dude!
Wow this is a goldmine of value and experience! And read minds by putting your base branch in there. Epic share. Subbed.
Need a video like this but for unit (vitest/jest), integration (vitest/jest/MSW) and e2e (Playwright) testing. Probably contract testing too (pact)
It's more than complete! Thank you
ok, I'm totally subscribed. this was fun to watch, and also learned so much! thank you man!
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.
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
Waooo ❤
How about payments, queues, events notifications ... as you mentioned in start of the video?
Coding garden with CJ❤
Amazing content! 👏👏👏 thanks for sharing it!
🤯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
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
Earned my sub after the beautiful coolify video. Thank you man
Cj thanks for sharing indeed very helpful.
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
Huge thanks for the content! ❤ Except semi: true 😂😜
Thanks CJ! You ROCK!
Great video! Thanks.
How can I do to don’t love that guy?? ❤❤
I love CJ tutorials and I miss self-host series!!😢
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. 😅
Yes thank you! Eventually I realized I'd have to show the .env file - credentials have been deleted.
Thanks, but you should add email password authentication too
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?
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"
BiomeJS!
insanely good. mooaaar, please!
very very thanks
awesome video
Hey! Whats the name of this vscode theme?
It is called "Just Black" - you can see me go over all of my settings here: th-cam.com/video/85q9FTdVyJs/w-d-xo.html
@@syntaxfm Thanks a ton!
Gold ❤
More CJ!