joplin-notes/joplin notion extension/Web Development/React/next/Coding.md

Coding

**Routes**
- Create another folder in app folder named 'about'. In about create a file named page.jsx and type following
  ```js
	export default function About() {
  return <h1>About me</h1>;
	}

	```
- Do same with 'Profile'
    ```js
	export default function Profile() {
  return <h1>Profile</h1>;
	}

	```

File Structure is 

```text
src/app
	about
		page.jsx
	profile
		page.jsx
	page.jsx
	layout.jsx
````
&nbsp;
**Nested Routes**

- means more folders say (first and second in blog folder and blog in app folder)

Structure
```text
src/app
	blog
		first
			page.jsx
		second
			page.jsx
	page.jsx
	layout.jsx
````
 &nbsp;
**Dynamic routes**
- pages with custom params in url

Structure
```text
src/app
	products
		[productId]
			page.jsx
		page.jsx
	page.jsx
	layout.jsx
````

`src/app/products/page.jsx`
```js
export default function ProductDetails() {
  return <h1> Details about Product</h1>; 
}

```
`src/app/products/[productId]/page.jsx`
```jsx
export default function ProductDetails({ params }) {
  return <h1> Details about Product {params.productId}</h1>;
}

```
or if its typescript then
```tsx
export default function ProductDetails({ params } : 
					{params: {productId: string};
					}) {
  return <h1> Details about Product {params.productId}</h1>;
}

```

Each function contains parameter object which has property params. This params is also object which contain property productId which is of type string
&nbsp;

**Nested Dynamic routes**
Structure
```text
src/app
	products
		[productId]
			reviews
				[reviewsId]
					page.jsx
			page.jsx
		page.jsx
	page.jsx
	layout.jsx
````
In `src/app/products/[productId]/reviews/[reviewId]/page.jsx`
```jsx
export default function ReviewDetail(prop) {
  return (
    <h1>
      Review {prop.params.reviewId} about product {prop.params.productId}
    </h1>
  );
}

```
Here prop will contain params, params will contain 2 fiels ie productId and reviewId and these both r strings. in `localhost:3000/products/1/reviews/2` output is
`params:  { productId: '1', reviewId: '2' }`
&nbsp;
**Catching Segments**
- Even with nested dynamic routes we may not know what type of routes or how much nesting is needed bcz page may contain dynamic links so to solve it catching such segments is required.
Structure
```text
src/app
	docs
		[...slug]
			page.jsx
	page.jsx
	layout.jsx
````
 In `src/app/docs/[...slug]/page.jsx` 
 ```jsx
export default function Slug({ params }) {
  console.log("params: ", params);

  if (params.slug.length === 1) {
    return <h1>only 1 {params.slug[0]}</h1>;
  } else if (params.slug.length === 2) {
    return (
      <h1>
        only 2 {params.slug[0]} and {params.slug[1]}
      </h1>
    );
  }

  return <h1> no one :( </h1>;
}

```
here params is object which will contain field named slug which is array of strings and contain all params after that. so if url `localhost:3000/docs/doc1/rev/rev1` then slug will be `['doc1', 'rev','rev1']`

the route `[...slug]` will only be visited if there r params after docs. To make sure that `page.jsx` works too then we need to use optional catch all. to do that enclose `[...slug]` with one more square bracket like this `[[...slug]]`.  and at `localhost:3000/docs`  `no one` will be showed. 
Optional catch all 
 In `src/app/docs/[[...slug]]/page.jsx` 
```jsx
export default function Slug({ params }) {
  console.log("params: ", params);

  if (params.slug?.length === 1) {
    return <h1>only 1 {params.slug[0]}</h1>;
  } else if (params.slug?.length === 2) {
    return (
      <h1>
        only 2 {params.slug[0]} and {params.slug[1]}
      </h1>
    );
  }

  return <h1>no one :(</h1>;
}

```
&nbsp;

**Custom Not-Found**
- By default when we visit a route which is not configured then error message is displayed of nextjs default configuration. So for custom one
 Create file named `not-found.jsx` in app folder
 
 In `src/app/not-found.jsx`
```jsx
export default function NotFound() {
  return (
    <div className="">
      <h2>Page not found</h2>
      <p>Not able to find requested resource</p>
    </div>
  );
}

```
so for unconfigured url this page will be displayed
In dynamic routes, params can be checked using if and if edge condition for error pass then this page can be displayed
```jsx
// importing notFound from 'next/navigation'
import { notFound } from "next/navigation";

export default function ReviewDetail(prop) {
  console.log("params: ", prop.params);

  if (Number(prop.params.reviewId) > 1000) {
    notFound();
  }

  return (
    <h1>
      Review {prop.params.reviewId} about product {prop.params.productId}
    </h1>
  );
}

```
As `not-found.jsx` is in app folder so all folders under this will inherit this not-found page. So if we wanna have custom one according to folder then create `not-found.jsx` for specific folder
So in `src/app/products/[productId]/reviews/[reviewId]/page.jsx`
```jsx
export default function notfoundRev() {
  return <h1>Review not found</h1>;
}

```
 So now this page will be displayed
&nbsp;

**File Collocation**
- `page.jsx` is important as it acts like a index.html for html css project, main() function in java or C. So next will try to find this file inside the folder and there must be one function which must be exported as default using `export default`.

In `src/app/dashboard/line-chart.jsx`
```jsx
export default function LineChart() {
  return <h1>Line Chart</h1>;
}
```
In `src/app/dashboard/page.jsx`
```jsx
import LineChart from "./line-chart";

function BarChart() {
  return <h1>Bar Chart</h1>;
}

function DashBoard() {
  return <h1>Dashboard</h1>;
}

export default function Main() {
  return (
    <div className="">
      <LineChart />
      <BarChart />
      <DashBoard />
    </div>
  );
}

```