Coding for Entrepreneurs

Ready to Start Learning?

Sign in to check if you already have access, or get started with a purchase or membership.

Tiny URL with Next.js

Learn the fundamentals of the popular React.js framework Next.js by building a end-to-end URL shortening service.
Every brand should have a URL shortening service for a few reasons:
  • Data ownership
  • Analytics tracking
  • Branding (e.g. no Bitly or other services)
  • Cost Savings
URL shortening is the process of taking any URL and assigning a unique ID to it. This ID is often 2-8 letters and numbers to make the url short and consice such as jref.io/abc13 or jref.io/ad32Wa and so on.
This course will take you through each step of the way to help you build your own URL shortening service will introducing you to the speed of Next.js. deploying on Vercel, and leveraging serverless PostgresSQL with Neon.
Here's what we'll cover:
  • React.js frontend and server-side rendering ➡️ Next.js is a React.js framework that handles front-end and backend
  • Vercel for Deployment ➡️ modern and easy deployments direct from GitHub/Bitbucket
  • Neon is Modern Serverless PostgreSQL ➡️ a fast Vercel-ready Edge-ready database with sub 40ms queries!
  • Edge functions for speed/performance ➡️ Server-side components that are fast and serverless!
  • DrizzleORM for handling SQL with JavaScript ➡️ Writing SQL can be tricky; Drizzle makes it easier
  • URL Shortening ➡️ A practical way to share and track links (this is what we build)
  • Tailwind CSS & Flowbite for the User Interface ➡️ Easily one of the best ways to style frontends
  • Users and sessions with custom built login, password hashing, registration, encrypted JWT sessions and more.

Resources

If you're interested in a Django version (albeit a bit older), consider watching this course.
Tiny URL with Next.js

Lifetime access to this course

or get access to 500+ courses with a membership

Lessons

1

Welcome

2:13

2

Walkthrough

7:41

3

Requirements

5:25

4

Start a Nextjs App

4:36

5

URL Routing in Nextjs

5:45

6

Handling API Routes and HTTP Methods

3:45

7

Dynamic URL Routes

6:15

8

Fetch data via Nextjs

7:24

9

Handling Fetch Errors in Nextjs

5:43

10

Pushing to Github with Git

7:54

11

Your First Nextjs Deploy to Vercel

5:55

12

Environment Variables for Vercel Domains

8:51

13

Fetch and Caching in Server Componets

6:51

14

Render React Client Component in Server Component

5:49

15

Client Side Fetching with swr

4:52

16

HTML Forms and Post Data Requests

10:42

17

Handling POST Data in a Nextjs Route

4:45

18

Validate Submitted URL For Shortening

4:15

19

Hello World from Neon Serverless

10:07

20

Edge Functions for Neon Database Connection

5:05

21

Create a SQL Table in the Neon Console

7:03

22

Your First Drizzle Table Schema

4:55

23

Create SQL from JavaScript with Drizzle

8:00

24

Create Data with Drizzle and Neon

4:00

25

Get Lists of Data with Drizzle and Neon

8:30

26

Refreshing Table Data as a Client Component

4:46

27

Refreshing Table based on Form Event

3:44

28

Storing Random Short Strings

3:16

29

Short Value DB Lookup

5:15

30

Customize the Nextjs 404 Page

2:46

31

Redirect to the Destination URL

3:15

32

Ensure Unique URLs with a SQL Index

4:13

33

Handling Database-level Errors with Unique Values

6:53

34

Visits Tracking Related Table

6:32

35

Track and Store Visits

8:16

36

Database Lookups with Related Data

7:48

37

Encypted JWT for Session Data

11:44

38

Using Cookies with Encoded JWTs

7:48

39

Adding the Users Table

9:26

40

Password Field & Hashing Functions

9:39

41

Register & Login Pages

5:56

42

Register and Save New Users in the Database

13:22

43

Login Users and Set User Session

9:14

44

List User-only Data

2:11

45

Logout Users

5:20

46

Fixing Node.js Crypto Issues for Vercel Deployment

9:03

47

Flowbite Integration & Form Alerts

11:28

48

Improved UI with Flowbite-React

28:36

49

Custom Domain Name on Vercel

5:10

50

Thank you and next steps

0:49