Next.js Crash Course | Build Client Components vs. Server Components to Integrate with PokeAPI

Описание: Using Next.js 14's client component and server components, and PokeAPI, we will build a Pokémon Profiler app. This project will demonstrate the differences between client components and server components.

WHAT IS NEXT.JS?

Next.js is a versatile and powerful React framework used for building modern web applications. It simplifies the creation of server-rendered React applications by offering a blend of server-side rendering, static site generation, and client-side rendering. This framework enables efficient development with features like automatic code-splitting, easy routing, and server-side rendering capabilities, making it a go-to choice for scalable and SEO-friendly web projects.

In this 3-hour crash course, we'll dive into the JavaScript and React-based Next.js framework by building a cool Pokémon Profiler app that displays Pokémon attributes and skills.

-----

Copyright Disclaimer:

This tutorial uses Pokemon images, characters, and the logo under fair use for educational purposes within this Next.js tutorial. We do not claim ownership of these materials; all rights belong to The Pokémon Company, Nintendo, and Game Freak.

This video aims to educate and demonstrate Next.js skills while acknowledging the ownership of the Pokemon franchise.

-----

Timestamps:

00:00 Introduction to Next.js 14 & Pokemon Profiler app
02:20 Client components vs. server components
03:50 Creating a New Next.js 14 project
08:35 App folder in Next.js 14 & globals.css file
11:55 RootLayout component (layout.jsx)
18:27 Editing JSX in the HomePage component (page.jsx)
21:25 Reviewing package.json
23:25 Adding Next.js components & helpers
25:30 Running the Next.js dev server (npm run dev)
28:04 Creating a HomePage component (page.jsx)
33:00 Creating new components in "app/components" folder
37:43 Adding Google fonts to Next.js project
46:23 Reviewing Tailwind CSS & basic CSS styles in globals.css
50:04 Defining JavaScript helper function and constant variable (utils/helpers.js)
58:35 Adding image (logo) to public folder
1:00:00 Building a Header component
1:08:10 Building the SearchForm client component & loader/spinner page (loading.jsx)
1:48:30 Making an async API callout to PokeAPI (GET request) in client component
1:56:04 Setting remotePatterns in next.config.js file to allow external images (next/image)
2:00:53 Testing API responses in client component
2:04:00 Building the TopPokemon server component
2:12:05 Making async API calls in server components (GET requests)
2:26:38 Adding JSX markup to server component (table and headings)
2:38:06 Calling async functions from Next.js/React functional component

-----

Download Visual Studio Code:
https://code.visualstudio.com

Download Node.js:
https://nodejs.org/en/download

ES7+React+Redux Extension:
https://marketplace.visualstudio.com/...

Github repo (source code):
https://github.com/coderversity/nextj...

PokeAPI Documentation:
https://pokeapi.co

---
#nextjs #clientcomponent #servercomponent #react #pokeapi #pokemon #codingtutorials #ssr #serverside #rendering #tailwindcss #tailwind

----

LIKE this video, SUBSCRIBE, and HIT the BELL ICON to stay updated on future crash courses, tutorials, and reviews!