NextJS and TypeScript Example Project

A functional EXAMPLE project written in TypeScript with NextJS framework using TailwindCSS

This project is an example that was built along with a Youtube Series showing how to create a Pokedex to show all first 151 pokemons fetched from https://pokeapi.co/ api.

• Create a NextJs project with TypeScript and TailwindCSS
• Load the data from https://pokeapi.co/ api
• Filter the data to reduce the size of data received
• Show a paginated list of data in table
• Show detailed data of each pokemon
• Change Dynamic rendered components to SSG as recommended by NextJS using generateStaticParams
• Improve SEO by using generateMetadata

Watch the full series

How to install and run this project

The easiest way is to watch the video series as it is self-explanatory, but here is a short version.

1. Clone the project
2. Run npm install to install the dependencies
3. Run npx prisma migrate dev --name init to create the dev.db
4. Run npm run dev and happy coding!
5. In case to see the Staic or SSG pages, simply run npm run build

How to tweak this project for your own uses

Since this is an example project, I'd encourage you to clone and rename this project to use to your own purposes. it's a good starter boilerplate.

Find a bug?

If you found an issue or would like to submit an improvement to this project, please submit an issue using the issues tab above. If you would like to submit a PR with a fix, reference the issue you created!