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.

_____________________________________________

Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
_____________________________________________

Connect with me 😀
_____________________________________________

COURSES 💻

[brendanerickson]

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!

[almeralmazan]

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

[teal]

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.

[tatemo_labs]

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

[austinhallett]

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

[codewithryan]

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

[stfalx]

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

[nestaxu]

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

[rohman]

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

[mwnkt]

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

[gmlinns]

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.

[violet-trash]

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

[sanskaarpatni]

Did anyone notice James' dog chillin on the sofaa

[carchaz]

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

[dailymeow]

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

[johnnytestarossa]

25:30
You can write:
pokemon.types.map(({ type }, index) => <p key={index}>{type.name}</p>)

To avoid type.type.
Notice {type}

[julienaz]

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?...

[ThanHtutZaw]

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 .

[tsioryfitiavanaanhykrishna]

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

[pankajsharma-rfov]

sir why are you not using <Image/> tag of nextjs. I am saying that bcz you are using <img/> tag of html instead of <Image/> tag

can u explain sir