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

    export default function About() {
  return <h1>About me</h1>;
    }
  
  

• Do same with 'Profile'

  export default function Profile() {
  return <h1>Profile</h1>;
  }
  
  

File Structure is

src/app
	about
		page.jsx
	profile
		page.jsx
	page.jsx
	layout.jsx

  Nested Routes

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

Structure

src/app
	blog
		first
			page.jsx
		second
			page.jsx
	page.jsx
	layout.jsx

  Dynamic routes

• pages with custom params in url

Structure

src/app
	products
		[productId]
			page.jsx
		page.jsx
	page.jsx
	layout.jsx

src/app/products/page.jsx

export default function ProductDetails() {
  return <h1> Details about Product</h1>; 
}

src/app/products/[productId]/page.jsx

export default function ProductDetails({ params }) {
  return <h1> Details about Product {params.productId}</h1>;
}

or if its typescript then

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  

Nested Dynamic routes Structure

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

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' }   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

src/app
	docs
		[...slug]
			page.jsx
	page.jsx
	layout.jsx

In src/app/docs/[...slug]/page.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

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>;
}

 

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

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

// 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

export default function notfoundRev() {
  return <h1>Review not found</h1>;
}

So now this page will be displayed  

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

export default function LineChart() {
  return <h1>Line Chart</h1>;
}

In src/app/dashboard/page.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>
  );
}