Back to Browse

Build a Full Stack URL Shortener with NextJs

803 views
Dec 27, 2024
3:53:49

In this course, you'll master Next.js, the official React framework, and learn essential concepts like routing, rendering, and full-stack features. Finally, you'll put your skills to the test by building your own enterprise-ready application, Task Management System, while optimizing performance and SEO. Get ready to impress potential employers with your new skills and real-world projects! FULLSTACK FRAMEWORK NextJs - https://nextjs.org/docs GIVE A STAR Source Code - https://github.com/mkasulecoder/shrivel_urlshortener_YT.git DATABASE MongoDB - https://www.mongodb.com/atlas MODERN CSS STYLING Tailwind CSS - https://tailwindcss.com/docs/installation WHAT YOU'LL LEARN In this video, you'll learn: Next.js 15 App Folder Structure Next.js 15 Client Components vs Server Components Next.js 15 File-based Routing (including dynamic, nested routes and route groups) Next.js 15 pages, layout, loading, and error Special Files Next.js 15 Serverless Route Handlers (Next API, API Routes, Full Stack Apps) Next.js 15 Metadata and Search Engine Optimization (SEO) Multiple ways to fetch data in Next.js: Server Side Rendering (SSR), Static Site Generation (SSG) Next.js 15 Server Actions Next.js 15 Data Fetching, Architecture Next.js 15 Parallel and sequential data fetching Encoding strings into nanoid strings URL Redirecting - custom URLs to the original Watch this NEXT Build and Deploy NextJs apps - https://youtu.be/Z82PC9I1OUw Fullstack Course - https://youtu.be/1GXcMjfFcNw Got Any Questions? Bluesky - https://bsky.app/profile/elitebytecode.bsky.social Threads - https://www.threads.net/@elitebytecode Instagram - https://www.instagram.com/elitebytecode Twitter/ X - https://x.com/elitebytecode Mastodon - https://mastodon.social/@elitemark Tune in to the latest Tech News: Spotify - Elite Byte Code Apple Podcasts - Elite Byte Code And all other podcast platforms Chapters: 00:00:00 - Demo Intro 00:20:00 - Folder Structure 01:35:42 - Dynamic Routes 01:00:00 - Connect to MongoDB Database 01:42:50 Adding URLs to the Database 02:30:00 - Data Fetching 04:00:00 - Copying URLs to Clipboards 05:20:00 - Redirecting short custom URLs to original URLs -

Download

0 formats

No download links available.

Build a Full Stack URL Shortener with NextJs | NatokHD