NextJS Beginners

SSG – Static Site Genereation

import React from 'react'
export const getStaticProps = async() => {
	cosnt response = await fetch('https://jsonplaceholder.typicode.com/users')
	const json = await response.json()
	return {
		props: {users: json}
	}
}

const Nested = ({users}) => {
	console.log(users)
	return(
		<>
		<ul >
			{users && users.map((user)=> {
				return(<li key={user.id}>{user.name}</li>
				)
			})
			}
		</ul>
		</>
	)
}

—-

import Link from 'next/link'
Home(){
	<>
		<NavBar/>
		<Link href='/nested'><a>Go To Nested</a></Lkink>
		<Footer/>
	</>
}

Layout : Layout.js
——-

const Layout = ({children}) => {
	return(
		<>
			<NavBar/>
				{children}
			<Footer/>
		</>
	);
};
export default Layout;

_app.js
……..

function MyApp ({Component, pageProps}) {
	return <Component {...pageProps} />
}

export default MyApp

Dynamic Routes & getStaticPaths
———————————
pages/nested/index.js

export const getStaticProps = async() => {
	cosnt response = await fetch('https://jsonplaceholder.typicode.com/users')
	const json = await response.json()
	return {
		props: {users: json}
	}
}

const Nested = ({users}) => {
	console.log(users)
	return(
		<>
		<ul>
			{users && users.map((user)=> {
				return(
				<Link href={`nested/${user.id}`}>
					<li key={user.id}>{user.name}</li>
				</Link>
				)
			})
			}
		</ul>
		</>
	)
}

pages/nested/[id].js (dynamic router file Ex: http://localhost:3000/5)

export const getStaticPaths = async() => {
	cosnt response = await fetch('https://jsonplaceholder.typicode.com/users')
	const json = await response.json()
	const paths = json.map((user)=>{
		return {
			params: {id:user.id.toString()}
		}
	})
	return {
		paths,
		fallback: false
	}
}

export const getStaticProps = async(context) => {
	const id = context.params.id
	cosnt response = await fetch('https://jsonplaceholder.typicode.com/users' + id)
	const json = await response.json()
	return {
		props: {users: json}
	}
}

cosnt Detail = ({user}) => {
	return (
		<div>
			{user.name}
			{user.username}
			{user.email}
		</div>
	)
}

export default Detail