Sign in to confirm you’re not a bot
This helps protect our community. Learn more

New Next.js 13 Features Project | Using Next.js 13 and OpenAI to build a Joke Generator Website

Akamai Developer
1.04M subscribers
<__slot-el>
<__slot-el>
107K views 1 year ago #OpenAI #Next #Akamai
‪@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 Cloud Computing? Get started here with a $100 credit → https://www.linode.com/lp/youtube-vie... 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 Con …...more
...more

Introduction

0:00

Create New Project

0:24

Start Dev Server

2:30

Start YARN Dev

3:20

Install Yarn

3:50

VSCode TIp!

4:40

Create Custom Root

5:30

Generate Meta Description

8:15

Using Layout.js

9:20

Import Aliases

11:00

Create Footer

13:20

Create Navbar

14:00

Style Footer

15:45

Create Content

17:30

Create Slider

21:20

Install Carousel

23:40

Remove Unneeded Buttons

26:15

Adjust Width

27:50

Generate Jokes in JSON Format

29:25

Insert Jokes

30:55

Ensure Joke Insertion is Random

31:05

Import useEffect

33:00

Use Dangerously Set HTML

34:20

Add Class to Joke Div

35:40

Create Regenerate Button

37:00

Add Jokes JSON

42:00

Check Page

42:25

Conclusion

42:35
New Next.js 13 Features Project | Using Next.js 13 and OpenAI to build a Joke Generator Website
419Likes
107,816Views
2023Jul 5
‪@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 Cloud Computing? Get started here with a $100 credit → https://www.linode.com/lp/youtube-vie... 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 → https://www.linode.com/docs/guides/ge... Learn more about Next.js → https://nextjs.org/docs/getting-start... Subscribe to get notified of new episodes as they come out → https://www.youtube.com/linode?sub_co... #Akamai #Next.js #OpenAI Product: Akamai, Next.js, OpenAI; @CodeWithHarry

Follow along using the transcript.

Akamai Developer

1.04M subscribers