Master NextJS 13: Build and Deploy a Modern Full-Stack App in Just 5 Hours!
NextJS has quickly become one of the most popular frameworks for building modern web applications. With its server-side rendering, built-in routing, and support for TypeScript, it offers a powerful and flexible environment for building full-stack applications.
Now, with the release of NextJS 13, it’s easier than ever to get started with NextJS and build and deploy a modern full-stack app in just 5 hours!
What’s New in NextJS 13?
NextJS 13 introduces a range of new features and improvements, including:
- Zero-config TypeScript support
- Automatic static optimization
- Faster refresh times
- Improved Next.js Image component
- Automatic Webpack 5 configuration
Build and Deploy in Just 5 Hours
Master NextJS 13: Build and Deploy a Modern Full-Stack App in Just 5 Hours is a comprehensive online course that will take you through the entire process of building a modern full-stack app with NextJS. By the end of the course, you’ll have a fully functioning app that you can deploy to the web and share with the world.
The course covers topics such as:
- Setting up a NextJS project with TypeScript
- Creating server-side rendered pages
- Building a RESTful API with NextJS API routes
- Using authentication and authorization in your app
- Deploying your app to Vercel
Whether you’re a beginner looking to get started with NextJS or an experienced developer looking to level up your skills, this course has something for everyone.
So why wait? Enroll now and start building and deploying modern full-stack apps with NextJS 13!
Please sir, you can make a video on how to clone the REST API of TMDB website. Please, this is my request. Im Love From INDIA
Thanks for this informative hosting video! Ive examined Hostwinds and DreamHost, however Cloudways with TST20 coupn is the final money-saver.
thank you nice content! i have question!!, why do you put your '/api' under 'pages' than 'app' ?
thanks for your sharing Josh I‘m looking for a project with react and next.js to practice and yours course is coming to me
For anyone who is trying this in next.js 13 when you are getting to the end where you are parsing the Post request payload, req.body doesn't work but at least for me await req.json() also doesn't work. In the video we can clearly see that Josh is making the request with postman and x-www-encoded-urlencoded formdata and so you have to parse it as such.
import { headers } from 'next/headers'
export async function POST(req:Request, res: Response) {
const body = await req.formData()
//const { text1, text2 } = reqSchema.parse(body) – crashes
const text1 = body.get('text1')
const text2 = body.get('text2')
const headerlist = headers()
const apiKey = headerlist.get('authorization')
if(!apiKey){
return new Response(JSON.stringify({error: "Unauthorized"}), {status: 401})
}
I just followed anything you did and got some help from your repo. But the code didn't work like you showed after login. I even clone your repo and it doesn't work. 😏
More comprehensive video on creating reusable components 17:30
youtube.com/watch?v=eXRlVpw1SIQ
make a coinmarketcap clone plsss 🇧🇷🇧🇷🇧🇷🇧🇷
i didn't understand the concept of video can anyone explain me, i want to start the new project, and it look nice
Can anyone tell the extension which he used to get the FC snippet at 16:08
I think all the dependencies you installed are neat, and would have never known of their existence if it wasn't for this tutorial. How do come across all these libraries? From watching other YouTubers, or reading blogs? Just curious on how you are able to stay up to date with all these packages.
I respect your skills bro. Just saw you in my YT fyp today and your channel content is awesome. Natural and smart. Grüße aus Gent, Belgien 🫡👌
The video as of march 9 and today the July 13… But when I start the project NextJS makes all the boilerplate for that Tailwind CSS stuff all automatically including in the global.css file… I am using pnpm so I did pnpx … and did not get that package.lock that is maybe you should be using yarn dlx … instead of npx (or in fact you should be using PNPM the Ukrainian made version of package management that is quite fast and awesome in my opinion)
What are the specs of your computer ?? 39:15 Relax Josh you are doing such a perfect job do not worry about that VS Code
In the Keyboard Shortcuts (cog wheel bottom left) look for Restart Type Script Server put an easy to remember keyboard shortcut it will make your live so easy you will have to say Thanks to Luxcium in one of your videos… 35:10 As someone who have been struggling a LOT with VsCode… I must admit that it is easy to blame the Text Editor… then I remember that it should be a setting to fix that… I like to think of my beloved Vscode as the perfection incarnated (well it is not incarnated so lets say it is a metaphor héhé)… But non the less I am struggling and then I take a pause change the setting until all is working… by that time I usually do not remember exactly how I have fixed that…
Hey fellows, if you want to enable IntelliSense in your "cva", just add this code to your VSCode settings.json file.
"tailwindCSS.experimental.classRegex": [
["cva\(([^)]*)\)", "["'`]([^"'`]*).*?["'`]"]
]
for some reason i can never get tailwind to work, i dont get intellisense for the colours ,and my CSS always says 'unknown rule @tailwind' does anyone know how to fix this? also obviously the styling doesnt work
Something that could have been useful would have been maybe just putting the import commands into the About section of this video, saving everyone the hassle of writing them out to find the package had depreciated or ERR! CODE 128. Let us try to make coding jargon-free in beginner videos and maybe speed things up when possible. As well I don't understand why we are importing singular components rather than the whole package for the sake of a few KB? This seems kind of infuriating and pedantic IMO.
Great content!
BTW, while setting environment variables in Vercel you can just copy&paste the whole content of the .env file into the first input, and it will populate all the inputs automatically (there is even a tip stating that, below the first input).
Why do I get a 500 internal server error using await openai.createEmbedding, I have my OpenAI Api key in my env vars. (edit: You need to set paid wallet to your OpenAI account)