Next.js 튜토리얼 (1)

오호·2022년 3월 2일
Reactnext
0

1. Hello World

당연히 헬로월드부터 찍어보자.
CRA를 이용하는 것과 비슷하다.

npx create-next-app hello-world

생성이 다되었으면 다음 커맨드로 실행해보자.

yarn dev
npm run dev

pages > index.js를 수정해보자.

간단하게 헬로 월드를 찍어보았다. 이로써 시작 세팅은 끝이났다.

2. 라우팅

Next를 이용해서 라우팅을 해보자. 헬로월드 다음으로 다른 프로젝트를 새로 생성해보자.

npx create-next-app next-routing

이번 실습에서 필요없는 파일들을 정리해보자. pages의 index.js와 api폴더를 삭제한다.

Next.js 는 파일 기반 라우팅을 가능하게 해준다.

pages폴더에 생성하는 대로 라우팅이 정해지게 된다는 것이다.

엔트리포인트는 index.js이다. 이를 생성해보자!

import React from 'react';

function Home() {
  return <h1>Home Page</h1>;
}

export default Home;

index.js는 앱의 루트로 매핑된다.

이번에는 /about 과 /profile을 구현해보자.

import React from 'react';

function About() {
  return <h1>About</h1>;
}

export default About;
import React from 'react';

function Profile() {
  return <h1>Profile</h1>;
}

export default Profile;

완성!

3. 중첩 라우팅

이번에는 /blog로 접속했을 때를 위한 컴포넌트를 생성하고 /blog/first /blog/second로 접속했을 때를 구현해보자.

blog.js

import React from 'react';

function Blog() {
  return <h1>Blog</h1>;
}

export default Blog;

이제는 중첩 라우팅을 구현해보자. 폴더 구조로 계층화를 시킬 수 있다.

pages아래에 blog폴더를 만들고 그 아래에 first,second컴포넌트를 생성해준다.

blog.js는 pages 폴더의 루트에서 관리되고 있다. 이를 해결하기 위해서는 blog.js를 blog폴더로 이동시키고 index.js로 이름을 변경시켜준다.

최종적인 디렉터리 구조는 다음과 같다.

4. 동적 라우팅

이번에는 /product페이지에서 product리스트를 보여주고 /product/id로 접근해서 상세페이지를 보여주는 시나리오를 구현해보자.

product.js

import React from 'react';

function Product() {
  return (
    <>
      <h2>Product1</h2>
      <h2>Product2</h2>
      <h2>Product3</h2>
    </>
  );
}

export default Product;

상세 페이지들을 구현할 때 개별컴포넌트로 개발해도되지만 100개가 넘어가면... 불가능하다고 볼 수 있다.
이럴 때 동적라우팅을 사용하는데 Next에서는 조금 특이한 방식을 사용한다.

[]로 감싸주고 그 안에는 params 명을 넣는다.

[productId].js

import React from 'react';

function Detail() {
  return <h1>Detail</h1>;
}

export default Detail;

이제 params로 설정해준 productId 값을 가져와 렌더링해주자. Next에서는 useRouter라는 간단한 훅을 제공한다.

import { useRouter } from 'next/router';
import React from 'react';

function Detail() {
  const router = useRouter();
  const productId = router.query.productId;

  return <h1>Detail about product {productId}</h1>;
}

export default Detail;

한 가지 작은 문제가 있는 것은 뒤에 params는 숫자뿐만 아니라 어떤 문자열이라도 올 수 있다. 또한 컴포넌트로 생성한 라우팅은 params보다 우선순위가 높다.

5. 중첩 동적 라우팅

우리는 단순히 /product/[productId]로 접근할 수도 있지만 /product/[productId]/review/[reviewId]로 접근해야할 경우도 있다. 이를 구현해보자.

product 폴더 하위에 [productId]라는 폴더를 만들고 index.js를 생성한 후 [productId].js의 내용을 복붙한다.

이번에는 하위에 review폴더를 만들고 [reviewId].js 파일을 만들어주었다.

이렇게 구현이 완료되었다.

next에서는 컴포넌트 내부에서의 라우팅 이동을 하기 위해 Link라는 컴포넌트를 제공한다.

/에서 /blog로 이동하는 UI를 만들어보자.

import Link from 'next/link';
import React from 'react';

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/blog">
        <a>Blog</a>
      </Link>
    </div>
  );
}

export default Home;

이번에는 product 페이지로 이동하는 것을 만들어보자.
바로 아래에 추가해보자.

<Link href="/product">
	<a>Products</a>
</Link>

이번에는 product에서 Home으로 이동할 수 있게 구현해보자.

import Link from 'next/link';
import React from 'react';

function Product() {
  return (
    <>
      <Link href="/">
        <a>Home</a>
      </Link>
      <h2>Product1</h2>
      <h2>Product2</h2>
      <h2>Product3</h2>
    </>
  );
}

export default Product;

링크 컴포넌트를 동적라우팅해보자.

import Link from 'next/link';
import React from 'react';

function Product() {
  return (
    <>
      <Link href="/">
        <a>Home</a>
      </Link>

      <h2>
        <Link href="/product/1">
          <a>Product 1</a>
        </Link>
      </h2>
      <h2>
        <Link href="/product/2">
          <a>Product 2</a>
        </Link>
      </h2>
      <h2>
        <Link href="/product/3" replace>
          <a>Product 3</a>
        </Link>
      </h2>
    </>
  );
}

export default Product;

Link의 프롭으로 replace를 설정할 수 있는데 만약 설정하게 된다면 뒤로가기를 눌렀을 때 바로 이전이 아니라 처음으로 이동하게 된다.

지금까지 clientside라우팅을 알아보았다.

7. 네비게이트

button클릭시에 이동하는 로직을 구현해보자. useRouter훅으로 구현이 가능하다.

import Link from 'next/link';
import { useRouter } from 'next/router';
import React from 'react';

function Home() {
  const router = useRouter();

  const handleClick = () => {
    console.log('placing Your order');
    router.push('/product');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/blog">
        <a>Blog</a>
      </Link>
      <Link href="/product">
        <a>Products</a>
      </Link>
      <button onClick={handleClick}>Place Order</button>
    </div>
  );
}

export default Home;

8. 404 커스텀

웹 페이지나 애플리케이션을 구성할 때 404 페이지는 필수요소이다. 어떤 환경에서 에러가 발생할지 모르니 항상 예외처리를 습관화하자.

그 중에서도 404는 존재하지 않는 url로 접근했을 때 렌더링 되는 페이지인데 이를 커스텀해보자.

지금까지 해왔던 방식과 유사하다. pages폴더에 404.js를 추가하자.

import React from 'react';

function PageNotFound() {
  return <h1>404 Page with all the custom styling necessary</h1>;
}

export default PageNotFound;

profile
오호
오호
이전 포스트

Next.js란?

다음 포스트

Next.js 튜토리얼 (2)

0개의 댓글