Next.Js 14 in baby steps - Step-01 Routs: Defining routs in App Router
Next.js is a popular framework for building web applications with React. It provides features such as server-side rendering, static site generation, code splitting, and dynamic routing. In this video, we will learn how to define routes in Next.js using the App Router.
The App Router is a component that handles the navigation between pages in your Next.js application. It uses a file-system based router, where each folder in the app directory represents a route segment that maps to a URL segment. For example, if you have a folder called dashboard inside the app directory, it will map to the /dashboard URL.
Check code here:
https://github.com/typescriptkamran/N...
To create a nested route, you can nest folders inside each other. For example, to create a route for /dashboard/settings, you can add a settings folder inside the app/dashboard folder and add a page.js file inside it. The page.js file will export a component for the settings page:
// app/dashboard/settings/page.tsx
To create a page for a route, you need to add a page.js file inside the folder and export a React component. This component will be rendered when the user visits the corresponding URL. For example, to create a page for the /dashboard route, you can add a page.js file inside the app/dashboard folder and export a component like this:
// app/dashboard/page.tsx
export default function DashboardPage() {
return Dashboard
}
This is how you can define routes in Next.js using the App Router. In the next video, we will learn how to create pages and layouts for your routes. If you want to learn more about routing in Next.js, you can check out the official documentations