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
You might also like…
-
Installing TensorFlow on an Ubuntu Server
In this video, Sam Hawley will show you how to install TensorFlow on Ubuntu Server running on the Linode platform. -
Ditch IFTTT and Zapier for Huginn | DIY Cloud
In this video, Gardiner demonstrates Huginn, which provides an open-source and self-hosted system for automating online tasks. -
Ben Chavet
Removing Technical Barriers to Collaboration -
Sending and Saving Data with Remix – Real World Database App Building
In this video, we'll cover Remix routing and submitting forms with HTML vs Javascript, as well as accessing data, validation, and saving.
