Route Groups in Next JS
A Route group can be created by wrapping the folder name with parenthesis (folderName) which helps in
- Organize the routes without affecting the URLs.
- To create a group of related routes together.
Dynamic Routes – A Dynamic segment can be created by wrapping a folder name in square brackets [folderName]
Loading UI and Streaming – It is a special file `loading.js` that helps to create meaningful loading UI with React suspense.
Streaming allows us to break down the page’s HTML into small chunks and progressively send those chunks from the server to the client.
Error Handling – The error.js file convention allows to handle unexpected runtime errors in nested routes
Route Handlers – Route Handlers allows you to create custom route handlers for a given route using the web request and response.
Route Handlers are defined in a route.js | ts
Getting Started with Next JS
NextJS is an open-source React framework for building full-stack web applications ( created and maintained by Vercel ). You can use React Components to build user interfaces, and NextJS for additional features and optimizations. It is built on top of Server Components, which allows you to render server-rendered React components to the client. This means your pages can be more interactive and dynamic, while still being fast and performant. One of its notable features is the NextJS App Router, which facilitates routing within your application. This article will dive into NextJS App Router, its components, and implementation, and provide a code example and a brief output.
Table of Content
- What Features NextJS Gives You?
- What Features Does NextJS Not Have?
- What is the NextJS App router?
- How to Create a NextJS App?
- NextJS Scripts
- Add TypeScript to NextJS
- Pages and Routes in Next JS
- Links and Navigation in Next JS
- Route Groups in Next JS
- SEO in Next JS
- API Routes in Next JS
- Data fetching in Next JS
- Requesting Data in Next JS
- Conclusion