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

Подписаться 201 тыс.

Просмотров 24 тыс.

50% 1

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/jamesqquick/nextjs...
Setting up Tailwind in Nextjs - dev.to/notrab/get-up-and-runn...
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquick.com
_____________________________________________
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.jamesqquick.com/courses/r...
Learn everything you need to know about Visual Studio Code - www.udemy.com/learn-visual-st...
Build a Quiz App - www.udemy.com/build-a-quiz-ap...

Опубликовано:

24 авг 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 48

@tatemo_labs 3 года назад

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

@teal4069 3 года назад

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 3 года назад

Haha thanks!!

@austinhallett2395 2 года назад

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

@brendanerickson4341 3 года назад

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 3 года назад

Haha great clarification. Thanks for checking out the video!

@almeralmazan 3 года назад

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

@JamesQQuick 3 года назад

It’s awesome!!

@stfalx 3 года назад

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

@17rohman 3 года назад

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

@JamesQQuick 3 года назад

Glad to hear it!

@lukecresante 2 года назад

incredible example! love it

@JamesQQuick 2 года назад

Awesome!!

@basith237 3 года назад

Thanks, nice next.js tutorial

@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

@nestaxu 3 года назад

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 3 года назад

Makes sense!

@violet-trash 2 года назад

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

@JamesQQuick 2 года назад

Glad to hear it :)

@Gabriel-cd5jx 3 года назад

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.

@mwnkt 2 года назад

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

@JamesQQuick 2 года назад

Yay :)

@sanskaarpatni9137 3 года назад

Did anyone notice James' dog chillin on the sofaa

@JamesQQuick 3 года назад

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

@carchaz3 3 года назад

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 3 года назад

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

@dailymeow3283 2 года назад

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

@rogercolque 3 года назад

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 3 года назад

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

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

@Maindev1994 Год назад

Ajalas buen vidio

@le_ch1mp 3 года назад

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

@JamesQQuick 3 года назад

Oh true good point!

@julienaz2274 3 года назад

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 3 года назад

Yep very true!!

@pankajsharma-rf1ov 3 года назад

that same I was thinking

@tsioryfitiavanaanhykrishna6992 3 года назад

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

@maskman4821 3 года назад

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 3 года назад

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