Next.js 13 - Routing, Folder Structure, Pages and Layouts Explained

Показать описание

Sections:
00:00 - intro
00:57 - creating a next13 app
04:22 - the RootLayout and home page
06:23 - adding font in next13
10:26 - adding pages and routes
15:27 - creating nested routes
17:41 - Link component- creating a navbar
22:21 - adding a shared layout at a segment
28:40 - adding a loading UI
33:22 - useRouter hook
35:32 - display the error UI
41:51 - api routes and fetching data

✨ Join My Discord Server

SUPPORT MY CHANNEL

GET IN TOUCH:

Disclaimer: This video is not sponsored

#next13 #reactjs

Рекомендации по теме

Комментарии

For those that check this out after the video was made. Need to replace `import { useRouter } from "next/router";` with `import { useRouter } from "next/navigation";`

niconel

This is hands down the best tutorial I've found on this version of Next

charles.direct

Thank you so much for your video. I was having a hard time understand the structure/pages of NextJS app router but your explanation is very clear and easy to follow. Appreciate it!

julienheng

I could cry right now.... I need this video so much

njeririziki

I've watched many videos regarding Next.js 13 tutorials, but this one has very concise and clean explanation. Subscribed and liked! 👍

ciandrapancho

Thanks so much for this tutorial. I subscribed!!!

ezeanichucks

Thank you so much for your video and I want to create login page without root layout, how to do?

hungtrinh

very nice explanation of the app directory, I just have one question about the RootLayout, is it possible to exclude some pages from having to share the main app layout like the main NavBar component in your demo?

big-jo

Great video, thank you. Which skin are you using for your VSCode?

charles.direct

Is this app folder with pages routes production ready?

timtech

How can we override the main layout? Actually in my root layout file i have header and footer and some of my grouped routes i want to use different header and footer. and for that i added a new layout.tsx file in that group. but it throws the "Hydration" error :( Can you please help

piscesyt

plese sir make a full project with next js 13

saimundev

Next.js 13 - Routing, Folder Structure, Pages and Layouts Explained

Next.js 13 - Routing, Folder Structure, Pages and Layouts Explained

Next.js 13 Crash Course Tutorial #3 - Pages & Routes

New Routing in NextJS 13 - Complete Overview And In-Depth Look!

Best NextJS Folder Structures | Beginner - Intermediate - Advanced

Next.js App Router: Routing, Data Fetching, Caching

Master Dynamic Routing in Next.js 13 - What You Need to Know!

NextJS 13 API Routes: Better Than Expected!

NextJS 13 - First Look at the /app Folder & Complete Demo

Build A Video Calling App in Next.js 15 with Zegocloud | Zoom Clone

NextJS Tutorial: Routing & Navigation + the NavBar

Use Route Groups in the Next.js 13 App Router for Organization 📂

Next.js 14 Tutorial - 5 - Routing

Next.js 13 - The Basics

Next.js 13 - How to use App folder & Layouts

NextJS 13 Tutorial - Routing, Data Fetching, Server Components...

NextJS 13 - App Folder with Project | Upgrade your Next project to App Folder

NextJs 13 API routes in `app` folder | NextJs 13 series

Redirecting unauthenticated users with Protected Routes in the Next.js 13 App Directory

NextJS Just Changed API Routing

Next.js 14 Tutorial - 13 - Route Groups

Next.js 14 App Router in 1 minute

Use this Next.js file structure

Next.js Pages, Layout, Links, Routes & Loading | Next.js 13 tutorial

Next.js 13 Crash Course Tutorial #7 - Dynamic Segments (Params)