Learn Next JS: Routing Step by Step

Опубликовано: 27 Июнь 2023
на канале: Konstantyn's coding

224

Routing is the fundamental and crucial part of any Single Page Application. Next.js in difference from plain React has a built-in routing system which is really good.

------------------------------------------------
Hello, my name is Konstantyn, I'm a Frontend Engineer working in a lovely city of Warsaw. My main technology stack is React. Please ask me questions in comments and subscribe for more tutorials like this!

✅ Follow Me:
LinkedIn: / kostianty. .
Github: https://github.com/burlai

☕ Buy Me A Coffee: https://www.buymeacoffee.com/konstantyn
-------------------------------------------------

Chapters:
0:00 - Intro & Theory
0:44 - Next.js 13 installation from zero
02:53 - Starter project overview
04:45 - The first route in Next.js 13
05:29 - `page.tsx` special file and its role
07:16 - `layout.tsx` special file and its role
10:40 - Creating a couple more routes
12:14 - The main way of navigation in Next.js 13 application - the `Link` component
14:54 - Summary and next steps

In version 13, Next.js introduced a new App Router, which supports shared layouts, nested routing, loading states, error handling, and more.
The App Router works in a new directory named app. By default, components inside the app directory are React Server Components. This is a performance optimization and allows you to easily adopt them, and you can also use Client Components.

Next.js router is based on files and folders. That means that we are defining routes by creating folders where the name of the folder will be the name of the route in the URL. You can nest as much folders as you like to create the desired structure. The UI itself is created in the component called page which you should place inside the folder for particular route.

#nextjs13 #nextjstutorial #nextjs