Next.js

Jeane·2021년 2월 16일

import Link from 'next/link'

const ArticleItem = ({article}) => {
    return (
        <Link href="/article/[id]" as={`/article/${article.id}`}>
            <a>
                <h3>{article.title} &rarr;</h3>
                <p>{article.body}</p>
            </a>
        </Link>
    )
}

export default ArticleItem

components > ArticleList.js

import ArticleItem from './ArticleItem'

const ArticleList = ({articles}) => {
	return (
    <div>
    	{articles.map((article) => (
        	<ArticleItem article={article} />
            ))}
     </div>
   )
}

export default ArticleList

ArticleItem에서 Link를 사용했기 때문에 이제 List에서 각 목록을 클릭하게 되면 url이 중첩된 루트처럼 나타날 것임

하지만 설정을 안해줬으므로 페이지는 404임 ㅋㅋ

Nested Routing

중첩 라우팅을 하는 건 너무나 간단하다
이렇게 우리가 설정할 url의 경로를 그대로 따라 폴더를 만들어주면 됨

pages > article > [id] > index.js

이 index.js가 우리 article의 싱글 페이지가 될 것

import {useRouter} from 'next/router'

	const article = () => {
    		const router = useRouter()
        	const {id} = router.query
        
        return <div> This is article {id} </div>
    }

이렇게 하면 각 id에 맞게 표시될 것임

getServerSideProps()

import {useRouter} from 'next/router'

	const article = ({article}) => {
    	//const router = useRouter()
        //const {id} = router.query
        
        return <div> This is article {article.id} </div>
    }

export const getServerSideProps = async (context) => {
	const res = await fetch(`...url...${context.params.id}`)
    
    const article = await res.json()
    
    return {
    	props: {
        	article
        }
    }
}

getStaticPaths()

getStaticProps와 짝으로 써야 함

export const getStaticProps = async (context) => {
	const res = await fetch(`...url...${context.params.id}`)
    
    const article = await res.json()
    
    return {
    	props: {
        	article
        }
    }
}

export const getStaticPaths = async () => {
	const res = await fetch(`...url...`)
    
    const articles = await res.json()
    
    const ids = articles.map(article => article.id)
    
    const paths = ids.map(id => ({params: {id: id.toString()}}))
    
    return {
    	paths,
        fallback: false
    }
    	
}

Export a Static Website

API Routes

위에서 jsonplaceholder를 통해 가상 데이터를 끌어와 사용했던 걸 우리가 정보를 직접 작성해서 API로 만들어 사용할 수 있음

기존에 있는 hello.js는 삭제하고 새롭게 생성
api > articles > idnex.js
데이터베이스 파일인 data.js를 최상위 루트에 가져왔음

import {articles} from '../../../data'

export default function handler(req, res){
	res.status(200).json(articles)
}

api > article > [id]

import { articles } from '../../../data'

export default function handler({ query: { id }}, res) {
	const filtered = articles.filter(article => article.id === id)
    
    if(filtered.length > 0) {
    	res.status(200).json(filtered[0])
    } else {
       	res.status(404).json({message: `Article with the id of ${id} is not found`})
    }
}

Using the API Data

config > index.js

const dev = process.env.NODE_ENV !== 'production'

export const server = dev ? 'http://localhost:3000' : 'https://whatever.com'

pages > index.js

import {server} from '../config'

	...
export const getStaticProps = async () => {
	const res = await fetch(`${server}/api/articles`)
    	const articles = await res.json()
            
        return {
  	    	props: {
   	           	articles,
                    },
                 }
}

//export const getStaticProps ...

pages > article > [id] > index.js
data fetching 부분 수정

Custom Meta Component

next/head api로 meta태그를 작성하는 방법도 있고 직접 컴포넌트를 만들어 커스텀할 수 있음
components > Meta.js

import Head from 'next/head'

const Meta = ({title, keywords, description}) => {
	return (
    		<Head>
            	<각종 meta 태그들 {title} {keywords} .../>
            </Head>
     )
}

Meta.defaultProps = {
	title: '',
    keywords: '',
    description: '',
}

defaultProps로 기본값 설정
그리고 Meta 컴포넌트를 Layout.js에 import해주면 됨

Jeane

이전 포스트

SSR-CSR-SEO

다음 포스트

Next.js

목차

Intro

특징

index.js

Routing

Head

Layout

Nav Component & Link

Header

Custom Document

Data Fetching

getStaticProps()