File Systems

NextJS App Router - File Systems

We use NextJS - the react framework, which sets up everything automatically for you.

Template Director

This page will guide you through how to define and organize routes in your Next.js application. Next.js uses a file-system based router where folders are used to define routes.

Pages and Layouts

A page is UI that is unique to a route. You can define a page by default exporting a component from a page.js file.

A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.

You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering.

Components

We use components for page section separators easy to handle customization, to avoid code complexity

hooks

We use hooks for maintained utils handles

Static Data Library

(lib) is Static Data Library, where stored static data in mock-data.ts file and utils.ts handle some utils functions

middleware

We use middleware for server component get path name

Components JSON

Configuration of shadcn/ui - Beautifully designed components that you can copy and paste into your apps.

TailwindCss Config

Where config Tailwind css for which is utility-first CSS framework

Typescript Config

The presence of a tsconfig.ts file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.ts file specifies the root files and the compiler options required to compile the project.