,

Master NextJS 13: Create and Launch a Modern Full-Stack App in 5 Hours!

Posted by








Master NextJS 13: Build and Deploy a Modern Full-Stack App in Just 5 Hours!


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!


0 0 votes
Article Rating
47 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Satish Singh
7 months ago

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

FazZzy
7 months ago

Thanks for this informative hosting video! Ive examined Hostwinds and DreamHost, however Cloudways with TST20 coupn is the final money-saver.

Sea Luke
7 months ago

thank you nice content! i have question!!, why do you put your '/api' under 'pages' than 'app' ?

Ecke Wu
7 months ago

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

ha go
7 months ago

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})
}

sisi 770
7 months ago

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. 😏

Ashmit Sharma
7 months ago

More comprehensive video on creating reusable components 17:30
youtube.com/watch?v=eXRlVpw1SIQ

Nicolas
7 months ago

make a coinmarketcap clone plsss 🇧🇷🇧🇷🇧🇷🇧🇷

Random Otaku
7 months ago

i didn't understand the concept of video can anyone explain me, i want to start the new project, and it look nice

Ân IT
7 months ago

Can anyone tell the extension which he used to get the FC snippet at 16:08

Denise Rodriguez
7 months ago

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.

KM
KM
7 months ago

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 🫡👌

Luxcium
7 months ago

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)

Luxcium
7 months ago

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

Luxcium
7 months ago

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…

Necip A.
7 months ago

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\(([^)]*)\)", "["'`]([^"'`]*).*?["'`]"]

]

Tehcooky
7 months ago

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

Zipjet
7 months ago

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.

UnfocusedDev
7 months ago

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).

Vommir
7 months ago

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)