Solana Development Tutorial - Next.js Crash Course + Crypto Project | Routes, Pre-Rendering (SSG, SSR, ISR, CSR), API

In this video you will learn everything you need to know to get started to build an app using Next.js. We will be applying the topics that we learn in this video to build a simple app that will fetch information about your favorite cryptocurrencies. Topics that wil be covered: 1) Page routing 2) Next.JS Html components and CSS modules 3) Different rendering/data fetching Strategies (Static Site Generation, Server Sider Rendering, Incremental Static Regeneration, Client Side Data Fetching) 4) API Routes Github: https://github.com/chang47/crypto-info 📙 Solana Playlist: https://www.youtube.com/watch?v=-AAtfPHEMbA&list=PL53JxaGwWUqCr3xm4qvqbgpJ4Xbs4lCs7 💰 Donations accepted (but optional): 2hYca42EE2kwmFZPV7M4skev1za7atWBh5ctzQWfsTD7 00:00 - Intro 00:14 - Video Overview 01:14 - What's Next.js? 01:57 - What does Next.js provide? 03:16 - Why use Next.js (vs React.js, Gatsby.js, Redwood.js) 06:00 - Next.Js Topics Covered 06:37 - Creating a project 08:48 - Next.js File Structure 11:28 - Page Routing 12:19 - Static Page Routes 13:19 - About _app.tsx 16:15 - Dynamic Page Routes 18:06 - Implement Dynamic Page Route 20:17 - Client side navigation with Link Component 21:13 - Head component 22:13 - Image component 23:45 - Script component 25:10 - Stylesheets 25:50 - Global CSS 27:45 - CSS Module 30:13 - Introduction to Pre-Rendering 31:01 - Static Site Generation 34:25 - Implement getStaticProps for Static Site Generation 44:00 - Static Site Generation for Dynamic Routes 44:56 - Implement getStaticPaths for Static Site Generation for Dynamic Routes 53:08 - Dealing with undefined paths with fallbacks 55:33 - Using fallback: true 55:56 - Incremental Static Regeneration (ISR) 57:55 - Server Side Rendering (SSR) 1:00:41 - Implement getServerSideProps for Server Side Rendering 1:06:50 - Caching for SSR 1:08:50 - Client Side Data Fetching 1:11:06 - Implement Client Side Data Fetching 1:17:55 - API Routes 1:18:26 - Implement Dynamic API Routes 1:22:35 - Implement API Routes that accepts POST payload 1:27:26 - Conclusion: Topics Overview 1:29:03 - What's Next? Setup instructions: Install: https://nodejs.org/ npx create-next-app --typescript crypto-info npm install npm run dev Messari API: https://messari.io/api Caching with Server Side Rendering: https://nextjs.org/docs/going-to-production SWR for client side data fetching: https://swr.vercel.app/ https://swr.vercel.app/docs/revalidation Create Solana App template: https://github.com/solana-developers/create-solana-app