ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • NextJS/Tailwindcss, getServerSideProps - Only Code
    개발 이야기/개발 및 서비스 2022. 8. 13. 09:00
    728x90
    반응형
    (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에서는 작동하지 않음.)

    반응형

    댓글 0

Designed by Tistory.