MENU

Fun & Interesting

Build a Full Stack URL Shortener with NextJs

Elite Byte Code 576 lượt xem 3 months ago
Video Not Working? Fix It Now

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
-

Comment