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

🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.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!)

[@kranthikumar5215]

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

[@uguryldrm9096]

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

[@flux-4]

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

[@gsindar]

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

[@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 :)

[@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

[@agungprakoso18]

so how to render image too in homepage ?

[@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.

[@apxlxnix1]

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

[@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 😂😂😂