Build and Deploy A Pokemon App With Next.js 13 (App Directory, Pokemon API)

Enjoying my videos? Sign up for more content here: www.coopercodes.com/
📩 Join CodeLetter by Cooper Codes, the 3 minute tech newsletter: thecodeletter.com
In this video we create a Next.js 13 project that allows us to search for Pokemon using the Pokemon API (pokeapi.co/). The tutorial covers dynamic routing, API calls, server vs client components, and more! This is a great beginner Next.js 13 tutorial and allows you to see the entire development process, starting from scratch to deploying the complete application.
Deployed Application: pokemon-finder-phi.vercel.app/
Final Code: github.com/coopercodes/Pokemo...
0:00 Project introduction
1:40 Next.js 13 project setup with shadcn/ui
4:10 Setup ThemeProvider with next-themes (Dark mode)
8:55 Create initial page style
12:15 Discussing PokemonGrid and Next.js 13 system design
14:40 Creating PokemonGrid component
25:15 getPokemonList API call to Pokemon API
29:05 Pass list of pokemon to PokemonGrid
31:50 Display Pokemon list data to user
33:30 Filter Pokemon by text input
36:50 Create /pokemonName route page
40:40 getPokemon API call to Pokemon API
43:10 Get Pokemon image with next/image
51:30 Show Pokemon stats to user (hp, defense, etc.)
56:54 Deploy to Vercel with Vercel CLI (Host your app!)

[@uguryldrm9096]

Dude, whenever I need some specific topics to see, you always upload it within 2 days, you are the best

[@gsindar]

Your channel is just amazing, and I am happy for discovering it.

[@kranthikumar5215]

Really love you man......God bless you....What a great and crystal clear explanation.And lot of new tricks learned 🎉🎉🎉🙏🙏

[@paulthomas1052]

Hi mate, thanks for another great tutorial - really enjoyed it and learnt loads. Thanks again !

[@coders_rant]

made me nostalgic and i got to learn next13 at the same time! thanks man

[@CooperCodes]

Glad it was fun for you :) thanks for watching

[@theofanisbirmpilis7364]

Great video! Keep the next js videos coming

[@CooperCodes]

Thanks so much! More on the way soon :)

[@sodastereofercu]

Muchas gracias por el video :) esta bueno para comprender mas Nextjs los que recién empezamos

[@codeozz]

Your lecture is really great

[@shotbyviera]

THANK YOU MAN :D

[@csyokesh.s2131]

Awesome video. Thanks.

[@CooperCodes]

You are very welcome, thanks for watching!

[@Nanashi-rq7lk]

Nice Video

[@apxlxnix1]

Hi buddy, what if I want to display their images on the home page? Should I make another API call?

[@HazedCoding]

How am I getting a call stack error with the same code you have, I've rewatched the 151 implementation a few times and can't resolve the issue.

[@agungprakoso18]

so how to render image too in homepage ?

[@zencatz]

how can i show the image of the pokemon when i on home page, not just show their name ?

[@user-dh8rm3ob4f]

so the getPokemonNames function that is awaited in Home() function is actually called in the server side?

[@CooperCodes]

Yup, we load the data server side and then pass in that data to the PokemonGrid component built on our client.

[@user-dh8rm3ob4f]

@@CooperCodes so in plain React, we generally use useEffect() to load the data and while the promise is pending, we show loading states right. So how do we handle this loading state in Next js, if the data that is fetched from an api endpoint takes a lot of time to load.

[@toxtethogrady4610]

please do a paid advanced course 🙂

[@ojaspalorkar7434]

help

[@alext5497]

Total weeb ex termination

[@CooperCodes]

😂I'm unsure what this means exactly ahahaha

[@dimadeloseros1]

@@CooperCodes 😂😂😂