[Next] Next.js이용한 쇼핑몰 구현

1. 결과

 

2. 동적 라우터

next는 위와 같이  각각의 페이지를 일일이 만드는 것이 아닌 id값으로 동적 라우터가 가능하다.

 

 

 

 

3. 내비게이션

위의 내비게이션 구현은  

 

import { useRouter } from "next/router";
import { Menu } from "semantic-ui-react";

export default function Gnb() {
  const router = useRouter();
  let activeItem;

  if (router.pathname === "/") {
    activeItem = "home";
  } else if (router.pathname === "/about") {
    activeItem = "about";
  } else if (router.pathname === "/admin") {
    activeItem = "admin";
  }


  function goLink(e, data) {
    if (data.name === "home") {
      router.push("/");
    } else if (data.name === "about") {
      router.push("/about");
    } 
  }

  return (
    <Menu inverted>
      <Menu.Item
        name='home'
        active={activeItem === 'home'}
        onClick={goLink}
      />
      <Menu.Item
        name='about'
        active={activeItem === 'about'}
        onClick={goLink}
      />
      <Menu.Item
        name='admin'
        active={activeItem === 'admin'}
        onClick={()=>{
          router.push("/admin");
        }}
      />

    </Menu>
  )
}

 

위의 코드처럼 작성 가능한데

여기서 주의할 점은 <a> 태그 혹은 location함수를 쓰지 않고, useRouter를 쓴다는 점이다. 이는 SPA장점인 새로고침 없이  페이지 전환이 가능하게 해 준다.

또한 nextjs에선 pages폴더 안에 만들어준 js파일은 하나의 페이지 역할을 한다.

 

4. 상품 상세 페이지(ServerSideRendering)

상품 상세페이지는 항상 새로운 데이터를 유지해야 한다. 뿐만 아니라 메타데이터에 상품의 설명을 나오게 해야 SEO등에 유리한다.

export async function getServerSideProps(context) {
    const id = context.params.id;
    const apiUrl = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
    const res = await axios.get(apiUrl);
    const data = res.data;

    return {
        props: {
            item: data,
            name : process.env.name
        },
    };
}

 getServerSideProps를 사용해준다.

 

 

 

 

5. 상품 목록(getStaticProps)

상품 목록 같은 경우 빠른 속도로 페이지를 띄우길 원한다. getStaticProps사용 시 정적 페이지를 생성 가능하다.

export async function getStaticProps(){
  const apiUrl=process.env.apiUrl;
  const res=await axios.get(apiUrl);
  const data=res.data;

  return {
    props:{
      list : data,
      name : process.env.name,
    },
  };
}
 

 

 

 

 

6. Prerendering

(1) no pre-rendering

프리렌더링을 안 할 시 렌더링 시에 모든 리액트의 요소들이 작동한다.

 

 

(2) 프리렌더링

next는 프리렌더링을 기본으로 한다. 프리렌더링 시 렌더링 전 HTML을 먼저 노출시킨 후 렌더링 후 js의 요소들을 작동한다.

 

 

 

7. Static Generation VS Server-Side-Rendering

(1) Static Generation

ws

정적 페이지는 build 시에 html이 생성하는 프리렌더링 방식이다. 미리 렌더링 된 html을 유저들이 요철 할 때마다 재상 용해서 준다. 속도가 빨라서 대부분의 페이지에 이용된다.

 

(2). Server-Side-Rendering

서버사이드 렌더링은 항상 최신 상태 유지하는 경우 사용 가능하고 SEO에 유리하다.

 

출처 : 코딩앙마