New Next.js 13 Features Project | Using Next.js 13 and OpenAI to build a Joke Generator Website
In this video, @CodeWithHarry explains how to create a random joke generator website using Next.js 13 and OpenAI’s API. Harry also covers some of the new features of Next.js 13, the latest installment of Next.js.
New to Linode? Get started here with a $100 credit!
Chapters:
0:00 Introduction
0:24 Create New Project
2:30 Start Dev Server
3:20 Start YARN Dev
3:50 Install Yarn
4:40 VSCode TIp!
5:30 Create Custom Root
8:15 Generate Meta Description
9:20 Using Layout.js
11:00 Import Aliases
13:20 Create Footer
14:00 Create Navbar
15:45 Style Footer
17:30 Create Content
21:20 Create Slider
23:40 Install Carousel
26:15 Remove Unneeded Buttons
27:50 Adjust Width
29:25 Generate Jokes in JSON Format
30:55 Insert Jokes
31:05 Ensure Joke Insertion is Random
33:00 Import useEffect
34:20 Use Dangerously Set HTML
35:40 Add Class to Joke Div
37:00 Create Regenerate Button
42:00 Add Jokes JSON
42:25 Check Page
42:35 Conclusion
Read the doc for more information on getting started with Next.js.
Learn more about Next.js.
Subscribe to get notified of new episodes as they come out.
#Akamai #Next.js #OpenAI
Product: Akamai, Next.js, OpenAI; @CodeWithHarry