## **★★★★★ Build NextJS TSX base folder and file use IMAGE** ### 1. base folder pages (filefolder) :::info ``` mkdir pages cd pages touch index.tsx ``` * add text in index.tsx :::success :::spoiler ``` export default function Page() { return <div>icewindful Webstie</div> } ``` ::: ### 2. make error page :::info ``` cd pages touch 404.js touch 500.js touch _error.js ``` ### add text in file 1. 404.js :::spoiler ``` export default function Custom404() { return ( <div> <h1>404 - Page Not Found</h1> <a href="http://localhost:3000/">back home</a> </div> ) } ``` 2. 500.js :::spoiler ``` export default function Custom500() { return <h1>500 - Server-side error occurred</h1> } ``` 3. _error.js :::spoiler ``` function Error({ statusCode }) { return ( <p> {statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'} </p> ) } Error.getInitialProps = ({ res, err }) => { const statusCode = res ? res.statusCode : err ? err.statusCode : 404 return { statusCode } } export default Error ``` ::: ### 3. pages & layout & routes :::info 1. about.js :::spoiler export default function About() { return <div>About</div> } ::: 2. index routes :::success ``` pages/index.js → / ``` ``` pages/blog/index.js → /blog ``` ::: 3. nested routes :::success :::spoiler ``` pages/blog/first-post.js → /blog/first-post ``` ``` pages/dashboard/settings/username.js → /dashboard/settings/username ``` ::: 4. pages with Dynamic Routes & Image make work js :::info mkdir pages cd pages mkdir JPgrils cd JPgrils mkdir JPGril touch [id].js :::warning ### copy two png in images folder back workspace / folder ``` mkdir public cd public mkdir images cd images ``` /public/images/JPGirl01.png /public/images/JPGirl02.png ::: vim [id.js] ### add text :::spoiler ``` import type { NextPage } from "next"; import Head from "next/head"; import Image from "next/image"; import Link from "next/link"; import { useRouter } from "next/router"; //import profilePic01 from '../../public/images/JPGirl01.png' //import profilePic02 from '../../public/images/JPGirl02.png' const JPgril: NextPage = () => { const router = useRouter(); // -> Access Next.js Router here const { id } = router.query; const str01 = "/images/" const str02 = ".png" const newstring = str01+[id]+str02; const altstring = String(id); //const newstring = str01.concat([id],str02); //console.log(str01) //console.log(id) return ( <div> <Head> <title>Love Girl</title> </Head> <main> {/* // -> Render the id on the screen */} <h1>This is Girl: {id}.</h1> <br></br> <Image src={newstring} alt={altstring} width={500} height={500} /* // if want to auto witdh change image , uncommit it. style={{ width: '100%', height: 'auto', }} */ /> <p style={{ color: "#0070f3" }}> <Link href="/">Back Home</Link> </p> </main> </div> ); }; export default JPgril; //import { useRouter } from 'next/router' ``` :::