components --> tsx or jsx

other ---> ts or js



CSS Modules

CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same class name in different files without worrying about collisions. This behavior makes CSS Modules the ideal way to include component-level CSS



"use client";  ---> tell server this is frontend part for next js


https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments



not-found.js or jsx 

for custom error page---^



layout.jsx or tsx  ---> work as master  , ex- adding header,footer



Configuring Metadata

  1. Export a static metadata object
  2. Export a dynamic generateMetadata function
Metadata rules
Both layout.tsx and page.tsx files can export metadata. If defined in a layout, it
applies to all pages in that layout, but if defined in a page, it applies only to that
page.

Metadata is read in order, from the root level down to the final page level.

When there's metadata in multiple places for the same route, they get combined,
but page metadata will replace layout metadata if they have the same properties



replace --> back to home page,when page clicked backed


Navigating Programmatically


roter.push("/")





Parallel Routes contd.

Parallel routes in Next.js are defined using a feature known as slots
Slots help structure our content in a modular fashion
To define a slot, we use the naming convention
Each slot is then passed as a prop to its corresponding 'layout.tsx' file.