The Ultimate Next.js 15 Course

0% completed

100%

Chapter 01

Getting started

Get the Most Out of This Course
Access to a Private 24/7 Community
Environment Setup

Chapter 02

Intro & Prerequisites

Intro to the course
Prerequisites

Chapter 03

Intro to Next.js

Before Next.js
Introduction to Next.js
How Web Works

Chapter 04

Practical Crash Course

Next.js installation
Next.js Project Structure
App Router
React Client and Server Components
Routing, Handling Errors & Loadings
Data Fetching (CSR, SSR, ISR, PPR)
API Routes
SEO & Metadata

Chapter 05

Setup of the project

Create a Next.js Application
Git & GitHub Setup
ESlint & Prettier Setup
Tailwind CSS Setup
Tailwind CSS Theming
Setup Fonts
Assets and Metadata

Chapter 06

Next.js Routing

File Based Routing
Advanced Routing

Chapter 07

Architecture

Birth of Server Components
Client vs. Server Paradigm
Different Rendering Strategies

Chapter 08

Light & Dark Theme

Set up the themes
Installing ShadCN UI
Creating the Navbar
Create a theme toggler

Chapter 09

Authentication

What is Authentication
HTTP State Management Mechanisms
Create Auth Routes
Create Auth Layout & Social Auth Form
Setup NextAuth with GitHub Provider
Implement Github SignIn
Implement Google SignIn
Creating Auth Form

Chapter 10

Application Navigation

Mobile Navigation
Active Lesson: LeftSidebar
Implement LeftSidebar
Implement RightSidebar

Chapter 11

State Management

What’s State Management
Different types of State Management
State Management in Next.js
URL State Management
Different URL Parameters in Next.js
How to do URL State Management

Chapter 12

Home Page

Home Layout
Local Search Bar
Filter in Next.js
Question Card

Chapter 13

Ask a Question Page

Question Form
Question Editor
Multiple Tags Input

Chapter 14

Develop Your Backend

Thinking in Backend
Setup MongoDB and Mongoose
Architect Database Structure
Create User Model
Action Lesson: Create Account Model
Create Account Model
Action Lesson: Create Question Model
Create Question Model
Action Lesson: Create Answer Model
Create Answer Model
Action Lesson: Create Tag Models
Create Tag Models
Action Lesson: Create Vote Model
Create Vote Model
Active Lesson: Create Collection Model
Create Collection Model
Action Lesson: Create Interaction Model
Create Interaction Model
The Mongoose Types

Chapter 15

Error & Log Handlers

The Art of Failing Gracefully
Implement Error Handling
Implement Logging

Chapter 16

API Routes (Route Handlers)

What is Serverless Backend
Introduction to Route Handlers
Common API Things to Keep in Mind
Create & Read User Routes
Dynamic User Routes
Users by Mail
Create & Read Account Routes
Dynamic Account Routes
Account by Provider
API Fetch Handler

Chapter 17

Authentication II: Social Auth Accounts

Flow of Application
The Edge Case
Accounts for oAuth
Debugging oAuth
What's Next?!

Chapter 18

Server Actions

Introduction to Server Actions
Server Action Demo
When and When Not to Use Server Actions
Security Concerns
API Routes vs Server Actions

Chapter 19

Authentication III: Email Password Auth

Flow of Application
Server Action Handler
Sign Up implementation
Sign In implementation
Auth Checks and Logout

Chapter 20

Question Submission

Create Question Action
Create and Test Question
Edit Question Action
Edit and Test Question

Chapter 21

Tags Page

Create Tags Action
Display Tags
Create Tags Question Action
Display Tag Specific Questions

Chapter 22

Question Details

Create Question Details UI
Render Question Content
Fetch Question Details
Question Views (Approach #1)
Question Views (Approach #2)
Question Views (Approach #3)

Chapter 23

Home Page DevOverflow

Fetch and Display Questions
Render UI States

Chapter 24

Answer Submission

Create Answer Form
Create Answer Action
Create Get All Answers action
Display All Answers

Chapter 25

AI Integration

AI Integration (Intro)
OpenAI Integration
AI Answer API Route
Generate AI Answer
Make Your Answer AI-Perfect

Chapter 26

Voting Actions

Develop UI
Create Vote Actions
Has Voted Action
Integrate Actions on UI
Fix Vote Issue
Answer Votes

Chapter 27

Community Pages

Get All Users Action
Display all Users

Chapter 28

Collections Page

Add to Collection Action
Implement Save Question
Show User Has Saved Question
Get All Saved Questions Action
Develop Collections Page

Chapter 29

Filters & Pagination

Create Filter Component
Integrate Filters Everywhere
Implement Pagination

Chapter 30

Show Top Results

Show Top Questions
Show Popular Tags
Optimization

Chapter 31

Profile Page

Get User Info
Develop Profile Header
Develop Stats UI

Chapter 32

Profile Page

Get User Info
Develop Profile Header
Develop Stats UI

Course

URL State Management

Sign up to watch this lesson (and more).

By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.

Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.

You'll also be the first to know about upcoming launches, events, and exclusive discounts.

No spam—just helpful content to level up your skills.

If that sounds fair, go ahead and log in to continue →

Enter your name and email to get instant access

Lecture Summary

Understanding URL State Management in E-commerce and Next.js

In this lesson, the presenter discusses the concept of URL state management in the context of e-commerce sites like Amazon and how it can be beneficial for both users and search engines. By reflecting search inputs in the URL, users can share links that lead to the same search results, and it offers an effective way to manage the state of applications.

URL state management allows for effective sharing of search results by including search parameters in the URL.
Examples of websites utilizing this practice include Amazon and SuperBase.
This method improves SEO by providing unique URLs for different content variations.
The analogy of a library is used to explain how organized URLs help in content discovery.
While URL state management is not exclusive to Next.js, it highlights the advantages of server-side rendering and efficient content organization.

Transcript

00:00:02 Have you noticed what happens when you visit any e-commerce site like Amazon and search for something?

00:00:08 Well, try it out.

00:00:10 Visit the Amazon website and search for anything that you like.

00:00:13 Maybe that MacBook you've been waiting to buy for a long time.

00:00:16 But while searching, keep an eye on the URL.

00:00:21 If you've been paying attention, you'll see that whatever you typed in the search bar has also been reflected in the URL bar.

00:00:28 But what does that mean?

00:00:29 Well, first of all, one benefit of this is that if you share that URL with your friend, they should be able to see exactly the same results.

00:00:38 And that, my friend, is URL state management.

00:00:42 You won't see the same effect with other ways of state management.

00:00:45 In React, if you manage the filters or the search through the client side and you pass over the link, it's just not gonna contain that data unless you

00:00:53 somehow put it in the URL.

00:00:55 Lots of websites and not just Amazon use URL state management to keep track of stuff.

00:01:01 Even SuperBase does it.

00:01:03 For example, I wanted to check how many people bought the Ultimate Next.js course, so I clicked on a filter, and the web address changed that filter to

00:01:12 show project, editor, and then filter course name.

00:01:16 As you can see, it's completely legal, it works, and it's actually considered the best practice.

00:01:23 By managing the state via the URL, you can easily share links, and when someone else opens that link, they'll see the same result as you did.

00:01:31 And this also helps to improve the SEO.

00:01:34 How, you might ask?

00:01:35 Well, this is because all of the variations of your content, such as different filters, sorting options, or pagination, have their own URLs,

00:01:44 making it easier for search engines to discover and rank your pages appropriately.

00:01:48 In simple terms, imagine your website is like a big library.

00:01:52 And each URL is like a unique bookshelf.

00:01:55 When you organize your books or the content on different bookshelves or URLs, it's easier for people or search engines to find that specific book or content

00:02:06 they're looking for.

00:02:07 Not only does this improve your website's visibility and ranking, It's also the easiest way to manage content.

00:02:14 So is that something new in Next.js?

00:02:16 Well, not at all.

00:02:18 You can do the same URL management in React, but Next.js just allowed us to realize how powerful it is because it helps us to render things on the server side.

Have you noticed what happens when you visit any e-commerce website like Amazon and search for something?

Let’s try it now. Visit the Amazon website, and search for anything that you like. Maybe that MacBook you have been wanting to buy for a long time or that chocolate of yours? Search it

But while searching, keep an eye on “URL”.

Now search.

If you notice carefully enough, you’ll see whatever you typed in the search box will appear in the URL as is.

If I share that URL with you here and if you open it. You should be able to see the same exact results.

This, my friend, is URL as a state management. You won’t see the same effect with other ways of state management.

Lots of websites, not just Amazon, use URLs as state management to keep track of stuff. Even Supabase does it.

For example, I wanted to check how many people bought our Ultimate Next.js course. So, I clicked on a filter, and the web address changed to show that filter.

https://supabase.com/dashboard/project/xxxxxxxxxxxxxxxxxxxx/editor/xxxxx?filter=course_name%3Aeq%3Aultimate-next-js-13-course-ebook&sort=created_at%3Adesc

You see, it's completely legal and actually considered a best practice. By managing state via the URL, you can easily share links, and when someone else opens that link, they'll see the same result as you did. This also helps improve SEO.

Insight

💡 How does URL as a state management improve SEO?

When you use unique URLs to represent different states or pages within your website, each URL serves as a distinct entry point for search engines to crawl and index your content.

This means that all the variations of your content, such as different filters, sorting options, or pagination, have their own URLs, making it easier for search engines to discover and rank your pages appropriately.

In simple terms, imagine your website is like a big library, and each URL is like a unique bookshelf. When you organize your books (content) on different bookshelves (URLs), it's easier for people (search engines) to find the specific book (content) they're looking for.

This organization helps improve your website's visibility and ranking in search engine results because search engines can better understand the structure and relevance of your content.

Using unique URLs for different states or pages also makes it easier for users to share specific content and for search engines to understand the context of that content, which ultimately can lead to better search engine rankings for your website.

So is it something new in Next.js?

Not at all. You can do the URL state management in React too.

URL state management is so underrated in the dev field that it took almost a new Next.js release to make us realize how powerful it is. Otherwise, we'd just keep using states all over the place.

0 Comments

No Comments Yet

Be the first to share your thoughts and start the conversation.