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: https://coderprep.com/
In this video we create a Next.js 13 project that allows us to search for Pokemon using the Pokemon API (https://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: https://pokemon-finder-phi.vercel.app/
Final Code: https://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!)
Смотрите видео Build and Deploy A Pokemon App With Next.js 13 (App Directory, Pokemon API) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Cooper Codes 30 Июнь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 10,76 раз и оно понравилось 31 людям.