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.
Had this video in my watch later turned out to be very exhaustive and a lot to learn from! You constantly help in building an in-depth knowledge and guide how to develop an application properly. This is very useful with all the best practices and the ability to learn and use all these new libraries together so quickly, thanks for helping to build that engineer mindset, something I'm trying to focus more on. 👍👏
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! 🙌
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.
Love the video! I actually learned a lot ☺️ Small tip for the "next-themes" setup: You don‘t need a custom "useSystemTheme" hook. The "useTheme" hook actually returns a property called "resolvedTheme", which does exactly the same thing 😊
I have some Python experience, but I have been learning JS and React recently. This video has been imensely helpful. I've been creating and fine-tuning my template for the last 3 days, using Cursor and v0 to help, and it has been a fantastic journey! What should I learn now, CJ? 😂
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 :)
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 🙏
Yes that is correct. For this example we only have 1 auth provider, so this is okay. If you have multiple you might want to use the built in next-auth login page, or be sure to create a page that allows users to login in multiple ways.
@@syntaxfm haaaa, i did not knew that. Also, two interesting things: a) i tested with credentials (username + pass ) only, and if i use signIn("credentials", urlToRedirect) it auto signs me, can't figured out why, yet. b) when you assigned the router.push to the navigate prop in the NextUIProvider, if you go the mobile version, the navbar does not close when you go navigate to another link.
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
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 ?
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.
auth.js is still in beta unless you stick with next-auth v4, but they do have a larger ecosystem of plugins / adapters. You typically write less code with Auth.js but in my experience it is harder to customize if you have specific auth flow needs that they don't account for. Lucia requires a bit more code and configuration to get up and going but is much more customizable because of this.
I go over my settings in this video: ruclips.net/video/85q9FTdVyJs/видео.html All of my settings are detailed here: github.com/codinggarden/vscode-settings
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 👾✨
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
🤯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
There was an error while adding jitti and this is how you've to do write the implementation : ``` import { fileURLToPath } from "node:url"; import { createJiti } from "jiti"; const jiti = createJiti(fileURLToPath(import.meta.url)); await jiti.import("./src/env/server.ts"); ``` Put this in `next.config.mjs` file
16:44 I followed all the steps for the prettier sort imports but it is not doing anything :( I moved the imports around in layout.tsx and saved the file but no sorting is occurring. Is there a way to know if it was installed properly? Also, is there a command to make it run on demand and not just when the file is saved? this would help me troubleshoot. Any help is appreciated 🙏🙏🙏🙏🙏🙏🙏
To run prettier on demand - CMD/CTRL + OPTION + F or CMD/CTRL + SHIFT + P and search for "Format Document" Some things to check: 1. Make sure the package is installed and listed in the package.json - github.com/w3cj/next-start/blob/main/package.json#L34 2. Make sure the plugin is listed in the .prettierrc.json file - github.com/w3cj/next-start/blob/main/.prettierrc.json#L15 3. Make sure eslint-config-prettier is installed - github.com/w3cj/next-start/blob/main/package.json#L42 4. Make sure prettier is the last item listed in the extends section of the .eslintrc.json - github.com/w3cj/next-start/blob/main/.eslintrc.json#L2 5. Double check your .vscode/settings.json - github.com/w3cj/next-start/blob/main/.vscode/settings.json#L4 6. Restart / reload VS code to make sure the latest settings get picked up. (CMD/CTRL+SHIF+P - search for "Developer: Reload Window"
After spending a day on it I was able to solve the problem so I'll leave the answer here for any other noobies that have the same issue. I don't know if it matters but I'm on windows 10 using VisualCode Studio. *First you need to make sure you have the prettier extension installed in vscode *After you follow the directions to install the prettier sort import plugin, if you don't see the sorting happening on file save, your visual code isnt using prettier as the default formatter. *Make sure you add this option to the settings.json in your .vscode folder: { "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll": "always" }, "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } *I hope this made sense to anyone that this issue. If you need any help just tag me here and I'll reply as soon as I can! I know what is like to feel like no one is there for you to help. Happy coding!
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"
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 ?
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?
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!
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.
I’ve been a web dev for 15+ years and always learn quite a few new things from your videos. Thank you! 🍻
Had this video in my watch later turned out to be very exhaustive and a lot to learn from! You constantly help in building an in-depth knowledge and guide how to develop an application properly. This is very useful with all the best practices and the ability to learn and use all these new libraries together so quickly, thanks for helping to build that engineer mindset, something I'm trying to focus more on. 👍👏
CJ is one of the good humans we need more of. Thanks CJ!
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! 🙌
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.
Another banger from CJ. Quite informative and easy to understand. Thanks CJ and Syntax
Love the video! I actually learned a lot ☺️
Small tip for the "next-themes" setup:
You don‘t need a custom "useSystemTheme" hook. The "useTheme" hook actually returns a property called "resolvedTheme", which does exactly the same thing 😊
Thanks for taking the time to put this resource together CJ. It's absolutely brilliant 👍
Wow. I don't think I have ever learnt so much in 24 minutes. Excellent video 👏🏻
This is insanely informative, helpful, and some really high quality content, thanks!
Starting from 10:08, everything you did, blew my mind! thanks dude!
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!
Thanks for choosing NextUI 🚀 -- Creator here
Thanks for making it!
This content is amazing! Thank you Syntax and CJ!
Wow this is a goldmine of value and experience! And read minds by putting your base branch in there. Epic share. Subbed.
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.
ok, I'm totally subscribed. this was fun to watch, and also learned so much! thank you man!
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!
WHAT A VIDEO! I learned A LOT! Thank you so much CJ 🔥
Really learnt a lot of stuff from your video. Fantastic. Thank you very much.
I have some Python experience, but I have been learning JS and React recently. This video has been imensely helpful. I've been creating and fine-tuning my template for the last 3 days, using Cursor and v0 to help, and it has been a fantastic journey! What should I learn now, CJ? 😂
woah its better then most of the premium courses out there. sick content. Keep it up.
That feeling when Wags from Billions drops another "how to code" video on yt ♥
This is fantastic! What would be really great is to create similar start videos for Astro and Remix too. Then we could easily compare them
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 :)
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
would be even better with Tests setup but maybe that's a topic for another video!
Yes I will cover this in a future video.
This is superb! Can you talk about multi-tenant routing (subdomain/custom domain), image optimization/handling...
Need a video like this but for unit (vitest/jest), integration (vitest/jest/MSW) and e2e (Playwright) testing. Probably contract testing too (pact)
You provide clean and gold information ❤ hard to find anywhere
Earned my sub after the beautiful coolify video. Thank you man
It's more than complete! Thank you
wow.. that was exhaustive! i guess you getting your terminal coffee by the gallon. thanks!
Thanks CJ! You ROCK!
Amazing content! 👏👏👏 thanks for sharing it!
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 🙏
Cj thanks for sharing indeed very helpful.
super super cool man. Thanks
Waooo ❤
How about payments, queues, events notifications ... as you mentioned in start of the video?
Hi CJ, when you override the pages signIn to the "/", you actually changed the login default page to that location, if i am not mistaken.
Yes that is correct. For this example we only have 1 auth provider, so this is okay. If you have multiple you might want to use the built in next-auth login page, or be sure to create a page that allows users to login in multiple ways.
@@syntaxfm haaaa, i did not knew that. Also, two interesting things:
a) i tested with credentials (username + pass ) only, and if i use signIn("credentials", urlToRedirect) it auto signs me, can't figured out why, yet.
b) when you assigned the router.push to the navigate prop in the NextUIProvider, if you go the mobile version, the navbar does not close when you go navigate to another link.
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
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 ?
Huge thanks for the content! ❤ Except semi: true 😂😜
new subscriber!! thank your for thiss!!!
Great video, highly appreciate your work, Kindly request you make similar video for vanilla react with vite
Great video! Thanks.
Great video , and very helpfull, it will be so great that you can show us how to set up translation with a library for example i18n...
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.
auth.js is still in beta unless you stick with next-auth v4, but they do have a larger ecosystem of plugins / adapters. You typically write less code with Auth.js but in my experience it is harder to customize if you have specific auth flow needs that they don't account for.
Lucia requires a bit more code and configuration to get up and going but is much more customizable because of this.
insanely good. mooaaar, please!
If possible can you please share your vscode settings/extensions/theme/fonts etc
I go over my settings in this video: ruclips.net/video/85q9FTdVyJs/видео.html
All of my settings are detailed here: github.com/codinggarden/vscode-settings
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 👾✨
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
awesome video
🤯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
Is it possible to share the presented excalidraw?
excalidraw.com/#json=7apmPAJYqjLmN2-WSkjHf,3wfAsRZh844VXWCYhH2CFw
I leave like and sub, it's an excellent content, I'd like you go up like this
Would be cool if you can increase font size, and make vscode bigger
Coding garden with CJ❤
Thank you
I am facing a bad issue in my vscode, html attributes are not suggested to me in a ".jsx" file , im soo confused please help
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.
very very thanks
There was an error while adding jitti and this is how you've to do write the implementation :
```
import { fileURLToPath } from "node:url";
import { createJiti } from "jiti";
const jiti = createJiti(fileURLToPath(import.meta.url));
await jiti.import("./src/env/server.ts");
```
Put this in `next.config.mjs` file
well talk good work
16:44 I followed all the steps for the prettier sort imports but it is not doing anything :( I moved the imports around in layout.tsx and saved the file but no sorting is occurring. Is there a way to know if it was installed properly? Also, is there a command to make it run on demand and not just when the file is saved? this would help me troubleshoot. Any help is appreciated 🙏🙏🙏🙏🙏🙏🙏
To run prettier on demand - CMD/CTRL + OPTION + F or CMD/CTRL + SHIFT + P and search for "Format Document"
Some things to check:
1. Make sure the package is installed and listed in the package.json - github.com/w3cj/next-start/blob/main/package.json#L34
2. Make sure the plugin is listed in the .prettierrc.json file - github.com/w3cj/next-start/blob/main/.prettierrc.json#L15
3. Make sure eslint-config-prettier is installed - github.com/w3cj/next-start/blob/main/package.json#L42
4. Make sure prettier is the last item listed in the extends section of the .eslintrc.json - github.com/w3cj/next-start/blob/main/.eslintrc.json#L2
5. Double check your .vscode/settings.json - github.com/w3cj/next-start/blob/main/.vscode/settings.json#L4
6. Restart / reload VS code to make sure the latest settings get picked up. (CMD/CTRL+SHIF+P - search for "Developer: Reload Window"
After spending a day on it I was able to solve the problem so I'll leave the answer here for any other noobies that have the same issue. I don't know if it matters but I'm on windows 10 using VisualCode Studio.
*First you need to make sure you have the prettier extension installed in vscode
*After you follow the directions to install the prettier sort import plugin, if you don't see the sorting happening on file save, your visual code isnt using prettier as the default formatter.
*Make sure you add this option to the settings.json in your .vscode folder:
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": "always"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
*I hope this made sense to anyone that this issue. If you need any help just tag me here and I'll reply as soon as I can! I know what is like to feel like no one is there for you to help. Happy coding!
Gold ❤
How can I do to don’t love that guy?? ❤❤
I love CJ tutorials and I miss self-host series!!😢
None of these come with Zustand? Why is that?
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"
I had to install the eslint extension in Visual studio code, the ide i'm using, not sure if this is your case.
Thanks, but you should add email password authentication too
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 ?
can you make also in nuxt
Hey! Whats the name of this vscode theme?
It is called "Just Black" - you can see me go over all of my settings here: ruclips.net/video/85q9FTdVyJs/видео.html
@@syntaxfm Thanks a ton!
BiomeJS!
Prisma Homepage says trusted by teams at Syntax 🤣
Prisma is great! We use it on syntax.fm
Like and subi , thanks 😊
Wilson John Thomas Shirley Lewis Barbara
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?
More CJ!