Build a Pokedex with NextJS and Tailwind CSS - SSR vs SSG

NextJS is a powerful framework built on top of React that allows you to easily mix Static Pages and Server Side Rendered pages. In this video, we'll use NextJS to build a cool Pokedex using the Pokemon API. The index page will be a statically generated page while the Pokemon details pages will be server-side rendered. We'll also use Tailwind CSS for styling the app.
Source Code - github.com/jam...
Setting up Tailwind in Nextjs - dev.to/notrab/...
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquic...
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquic...
Learn everything you need to know about Visual Studio Code - www.udemy.com/...
Build a Quiz App - www.udemy.com/...

[@brendanerickson4341]

Hate to break it to you James, but there are 151 OG Pokemon.
But real talk this was incredibly cool/helpful.
Keep up the awesome content!

[@JamesQQuick]

Haha great clarification. Thanks for checking out the video!

[@teal4069]

The moment you said "pokeMAN" as for the singular form of pokemon you lost me and I lost hope for all mankind.
Just kidding. This is a great tutorial.

[@JamesQQuick]

Haha thanks!!

[@almeralmazan]

Wow, this made me realize how powerful Next.js is. Thank you.

[@JamesQQuick]

It’s awesome!!

[@JamesQQuick]

Let me know if you enjoy the demo and make sure to check out the source code - github.com/jamesqquick/nextjs-pokedex-with-tailwind-css

[@tatemo_labs]

Thank you! I learned TaildwinCSS on NextJS, also you gave right example of how to render static content vs. dynamic content.

[@austinhallett2395]

Thank you for the very fun and informational intro to NextJS. Just what I needed!

[@stfalx]

You explain things very nicely! Really makes it easy to learn new things. Btw, cute puppy! :) Cheers!

[@17rohman]

Thanks Sir... I love Your Tutorial.. simple and to the point

[@JamesQQuick]

Glad to hear it!

[@nestaxu]

Nice demo. I reckon the reason why we don't need to specify href on inside of might be that the `Link` component traverses children, checks if the child is , and assigns href to that child as an extra prop via `cloneElement`, so it saves us typing href on by ourselves.

[@JamesQQuick]

Makes sense!

[@Gabriel-cd5jx]

Thanks, James. I'm already a fan of your work! How about building some kind of simple e-commerce or food ordering app for the future? Would be great.

[@codewithryan4646]

Great video, I would argue that static pages would be better for the individual pokemon. The first page is statically generated so the pokemon wont change on that page. You can also get pre rendering if you use static site generation which would speed up the app. None the less great video

[@mwnkt]

My go to place to learn SSR technologies, i learnt SvelteKit from here nice to learn the basics of next as well.

[@JamesQQuick]

Yay :)

[@violet-trash]

Great video. Short, fun, and it covers just the things I needed to know.

[@JamesQQuick]

Glad to hear it :)

[@sanskaarpatni9137]

Did anyone notice James' dog chillin on the sofaa

[@lukecresante]

incredible example! love it

[@JamesQQuick]

Awesome!!

[@basith237]

Thanks, nice next.js tutorial

[@tsioryfitiavanaanhykrishna6992]

Dude, just follow the official tailwind docs to integrate next.js

[@ThanHtutZaw3]

Quick Question : when user scroll and cliked item with id 30 , then user reach details page (id 30) . Then user click browser back button to go HomePage and user have to scroll to id 30 . Any sugesstion ? I fix it by adding scrollRestoration in next.config.js .

[@dailymeow3283]

Which should i use for stocks app, ssr or csr or ssg ? , data fetched will always be changing and i need the user to see changes without refreshing the page

[@julienaz2274]

Great video and beautiful dog 😁 You could also have named the 'pokemon' page to [pokemon] and dynamically change the URL name. Just by changing href like : /${pokeman.name}?id={index +1} instead of /pokemon?...

[@JamesQQuick]

Yep very true!!

[@pankajsharma-rf1ov]

that same I was thinking

[@carchaz3]

Great tutorial! One question, though. At 16:00 , I'm not sure why we need the anchor tag when we're already using Link.

[@reanibutani9555]

Link in nextjs is similar to react-router, the difference is in the syntax...
Link requires anchor tag

[@le_ch1mp]

25:30
You can write:
pokemon.types.map(({ type }, index) => {type.name})
To avoid type.type.
Notice {type}

[@JamesQQuick]

Oh true good point!

[@rogercolque]

Hi its possible to load a (holder image, progress, progres image) idk how said it. until the image(Pokemon) is fully loaded.
Because image load slower than the name.

[@pankajsharma-rf1ov]

I think the answer of this question is tag of nextjs that internally do lazy loading but I don't know why sir is not using in this video

[@Maindev1994]

Ajalas buen vidio

[@pankajsharma-rf1ov]

sir why are you not using tag of nextjs. I am saying that bcz you are using tag of html instead of tag
can u explain sir

[@JamesQQuick]

This video came out before the image tag was available in nextjs :)

[@Peter-ur8nv]

Why using SSR instead of getStaticProps for pokeman page? 🙂

[@JamesQQuick]

You could do it either way. Just wanted to try ssr.

[@maskman4821]

Thanks for creating this tutorial, it is a small but elegant project, I built this clone with Nuxtjs, because I feel it is very odd to write jsx, if anyone is interested in building this project with Nuxtjs, please check it out:
Github: github.com/stephenlaichaowen/pokedex-nuxtjs

[@JamesQQuick]

Awesome! I haven’t spent a lot of time with vue yet but I know people love it!

[@note-karlo]

🤗🤓

[@JamesQQuick]

Thanks!

[@saalimkhan9325]

doggo