NextJS/Tailwindcss, getServerSideProps - Only Code

(https://ongamedev.tistory.com/499- 코드에서 이어집니다.)

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
vi tailwind.config.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
(...)
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
(...)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

cd components && vi header.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import 'tailwindcss/tailwind.css';
import Link from 'next/link'

export default () => (
	<nav className="bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900 fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600">
		<div className="container flex flex-wrap justify-between items-center mx-auto">
			<p> NextJS Sample </p>
			<div className="flex md:order-2">
				<button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Login</button>
			</div>			
			<div className="hidden justify-between items-center w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
	    		<ul className="flex flex-col p-4 mt-4 bg-gray-50 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
	    		<ui>
					<Link href="/">
						<a className="inline-block bg-blue-500 cursor-pointer text-white p-2 rounded-md text-center shadow-sm"> Home </a>
					</Link>
		    	</ui>
	    		<ui>
					<Link href="/admin">
						<a className="inline-block bg-blue-500 cursor-pointer text-white p-2 rounded-md text-center shadow-xl"> Admin </a>
					</Link>
	    		</ui>
	    		</ul>
			</div>
		</div>
	</nav>
)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

vi layout.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Header from '/components/header'

export default (props) => (
	<div className="p-40">
		<Header />
		{props.children}
	</div>
)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

cd .. && vi index.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Layout from '/components/layout'


export default (props) => {
	const posts = props.stats;
	return (
	<Layout>
		<div className="relative">
			<div className="grid grid-flow-col auto-cols-auto gap-x-1">
	        {posts.map(post =>
	          <div className="float-left bg-green-500 text-white rounded-md text-center shadow-xl"
	            key={post.key}
	            style={{ padding: 20, borderBottom: '1px solid #ccc' }}>
	            <h2>{post.title}</h2>
	            <strong>{post.value}</strong>
	        </div>)}
	        </div>
	    </div>
	</Layout>
	)
}

import fsPromises from 'fs/promises'
import path from 'path'
// getStaticProps : 빌드 시 고정되는 값. 배포 이후에는 변경되지 않는다.
// getStaticPaths : 동적 라우팅 + getStaticProps
// getServerSideProps : 매 요청 시 서버에 요청
export async function getServerSideProps() {
	const filePath = path.join(process.cwd(), '/assets/data.json');
	const jsonData = await fsPromises.readFile(filePath);
	const objectData = JSON.parse(jsonData);

	return {
		props: objectData
	}
}
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

cd admin && vi index.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Layout from '/components/layout'
import Link from 'next/link'

const MenuLink = (props) => (
	<ui>
		<Link className="text-gray-900 dark:text-white hover:underline" href={{
			pathname: '/admin/menu',
			query: {title:props.title}
		}}>
			<a>{props.title}</a>
		</Link>
	</ui>
)

export default () => (
<Layout>
	<nav className="bg-gray-50 dark:bg-gray-700">
	    <div className="py-3 px-4 mx-auto max-w-screen-xl md:px-6">
	        <div className="flex items-center">
				<ul className="flex flex-row mt-0 mr-6 space-x-8 text-sm font-medium">
					<MenuLink title="Dashboard" />
					<MenuLink title="Management" />
				</ul>
			</div>
		</div>
	</nav>
</Layout>
)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

vi menu.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Link from 'next/link'
import Layout from '/components/layout'
import { withRouter } from 'next/router'

const Menu = ({router:{query}}) => {
	if(query.title == "Dashboard"){
		return(
		<Layout>
			<h1>{query.title}</h1>
		</Layout>
		)
	}else if(query.title == "Management"){
		return(
		<Layout>
			<h1 className="font-mono text-3xl font-bold">{query.title}</h1><br/>
			<p>
				Welcome to the Next.js documentation! <br/>
                (...)
			</p>
			<Link href="https://ongamedev.tistory.com/499">
				<button type="button" className="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Read Detail</button>
			</Link>
		</Layout>
		)
	}
}

export default withRouter(Menu)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

(* tailwindcss link)

(*full source code link)

(* getServerSideProps 등의 함수는 non-page components에서는 작동하지 않음.)