NextJS - 2 (다이나믹 라우팅)

J-USER·2021년 7월 2일

NextJS

목록 보기

3/6

동적 라우팅

NextJS의 기능 중에서 강력한 기능 중 하나인 동적 라우팅 기능입니다. 동적 라우팅은 말 그대로 정적으로 라우팅 페이지를 각각 만드는 것이 아닌 동적으로 페이지를 자동으로 생성하고 연결하는 것 입니다.

쇼핑몰을 예를 들면 /립스틱1 , /립스틱2, /파우더 ... 아주 많은 페이지가 각각의 상세 페이지로 구성이 되어야합니다. 이것을 각각 다 따로 만드는 일은 없겠죠,,?
그래서 [id].js 파일을 생성하면 자동으로 해당 아이디의 값을 이름으로 가지는 JS 파일로 들어오는 동적인 경로를 가지게 됩니다.

[id].js

import { useRouter } from 'next/router'
/* 
다이나믹 라우팅으로 만약 클릭을 하게 되면 해당 id에 대한 페이지로 들어오게 됨.
 
*/
const Post = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>Post: {id}</p>
}

export default Post

링크

이제 해당 상세 페이지의 위치를 만들었으니 전체 페이지에서 상세 페이지로 이동 하기 위한 링크가 필요합니다. 사용법은 <a/> 태그와 동일합니다.

#ItemList.js

export default function ItemList({list}) {
    return (<div>
      <Grid columns={3} >
        <Grid.Row>
            {list.map(item =>(
                <Grid.Column key = {item.id}>
                    <Link href={`/view/${item.id}`}>
                        <a>
                            <div className={styles.wrap}>
                                <img src={item.image_link} alt = {item.name} className={styles.img_item}/>
                                <strong className = {styles.tit_item}>{item.name}</strong>
                                <span className= {styles.txt_info}>
                                    {item.category} {item.product_type}
                                </span>
                                <strong className ={styles.num_price}>${item.price}</strong>
                            </div>
                        </a>
                    </Link>
                </Grid.Column>
                
                
            ))}
            
        </Grid.Row>
    </Grid>
    </div>)
}

상세페이지

import {Button , Header} from 'semantic-ui-react'
import styles from "./Item.module.css";

export default function Item ({item}){
   const {image_link , name, price , description, updated_at, category , product_type,product_link} = item

   return (<>
       <div className={styles.wrap}>
         <div className={styles.img_item}>
           <img src={image_link} alt={name} />
         </div>
         <div className={styles.info_item}>
           <strong className={styles.tit_item}>{name}</strong>
           <strong className={styles.num_price}>${price}</strong>
           <span className={styles.txt_info}>
             {category ? `${category}/` : ""}
             {product_type}
           </span>
           <Button color="orange">구매하기</Button>
         </div>
       </div>
       <Header as="h3">Description</Header>
       <p style={{ paddingBottom: 20, fontSize: 18 }}>{description}</p>
     </>)
}