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

Channel:
United States Akamai Developer
Subscribers:
1,040,000
Published on ● Video Link: https://www.youtube.com/watch?v=hQz-IUzI1Tw


Category:
Tutorial
Duration: 43:05
107,103 views
430

@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-viewers/?ifso=linodetube&utm_source=youtube&utm_medium=SuperUser

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/getting-started-next-js/
Learn more about Next.js → https://nextjs.org/docs/getting-started/installation
Subscribe to get notified of new episodes as they come out → https://www.youtube.com/linode?sub_confirmation=1

#Akamai #Next.js #OpenAI
Product: Akamai, Next.js, OpenAI; @CodeWithHarry



Other Videos By Akamai Developer


2023-07-26How to Use the cut Command in Linux | Top Docs with LearnLinuxTV
2023-07-24Odoo | The Open Source App Suite for Businesses
2023-07-21Troubleshooting Terraform with TF_Log | Terraform Tapas Ep 5
2023-07-19Popeye Demo | The Kubernetes Utility that Scans and Reports Potential Misconfigurations
2023-07-17Build Your Own OpenAI Powered Grammar Corrector | OpenAI and Python Tutorial
2023-07-14How Terraform Tracks Changes | Terraform Tapas Ep 4
2023-07-12Linux Command Line Tips | Use The 'tr' Command to Transform, Replace, and Remove Characters
2023-07-10Apache Kafka Explained | What Makes it so Fast and Reliable?
2023-07-07How to Level Up Your Kubernetes Skills by Leveraging the Power of CronJobs
2023-07-06Terraform Workflow Explained | Terraform Tapas Ep 3
2023-07-05New Next.js 13 Features Project | Using Next.js 13 and OpenAI to build a Joke Generator Website
2023-06-30Kubernetes VS Nomad | Which Orchestration Tool is Best to Build With?
2023-06-29How Terraform Saves Developers' Time | Terraform Tapas Ep 2
2023-06-28Easily Move Files To and From a Server with VSFTP | Top Docs with Jay LaCroix
2023-06-26How to Containerize Databases to Work with Docker | MongoDb Example
2023-06-23Working with Terraform and Ansible | Choosing the Ultimate IaC Tool
2023-06-22Terraform Tapas Ep 1 | What Terraform Does
2023-06-21Deploy Scaleable Django Apps with PostgreSQL Clusters | Code With Harry Tutorial
2023-06-16How to Deploy Scalable Django Apps Using Gunicorn and NGINX | Code with Harry
2023-06-14Use the Man Command to Learn Any Linux Command | Top Docs With Learn Linux TV
2023-06-12Deploy Your Containerized App With Docker Swarm | Scalable App Deployment


Tags:
nextjs
next js 13
web development
web app
nextjs 13
nextjs react
next js
next.js
next.js 13
next js 13 tutorial
next 13
learn web development
next js typescript
programming
progressive web app
code with harry
nextjs project
website nextjs
javascript
react
next js 13 features
next js 13 tutorial project
next js app
nextjs 13 tutorial
next js 13.1
nextjs tutorial
next js course
webapp
webapp building
next js 13 quick tutorial
next js tutorial 13