[Next.js] 노마드코더 강의 정리 Part.2

2023. 6. 14. 17:02·Next.js
목차
  1. 1. Patterns
  2. 2. Fetching Data
  3. 3. Redirect and Rewrite
  4. 4. Server Side Rendering
728x90
반응형

1. Patterns

layout : layout component를 생성하고 생성한 component를 상위 컴포넌트로 적용할 컴포넌트들을 감싸주면 된다.

_app.js 파일이 지나치게 커지는 것을 막기 위하여 쓴다. Layout 컴포넌트를 만들어주고, App 컴포넌트에서 이를 사용한다.

Head 컴포넌트

  • 리액트에서 react-helmet으로 구현했던 것들을 Next.js에서는 간단히 Head 컴포넌트로 구현 가능하다.

2. Fetching Data

public 폴더에 있는 파일들은 쉽게 import할 수 있다.

Image

next.js에서는 이미지 최적화를 위해 img 태그 대신 Image 태그를 사용한다.

import Image from "next/image";
...
<Image src="/vercel.svg" alt="" width={100} height={30} />...

3. Redirect and Rewrite

1) Redirect

상위 폴더에 보면 next.config.js파일이 있다.

const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/contact",
        destination: "/form",
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;
반응형
  • 유저가 source의 url로 방문하면, destination으로 리다이렉트 해준다.
  • 위의 예로 보면 url에 /contact를 쳤으면, /form주소로 우회해준다.
  • 공식문서에 permanent를 설명하고 있다. permanent는 boolean값만 넣을 수 있다.

공식문서에 나와 있는 설명
공식문서에 나와 있는 설명

  • permanent:true->308, permanent:false->307 으로 설정하면 된다.
  • 간단하게 말하면 307은 임시다이렉트할 주소로 설정하면 그 사이트로 이동하게 해준다. 308은 영구적인 리다이렉트로 임시주소가 아닌 새로 바뀐 주소로 사이트를 이동해주는 것을 말한다.

2) Rewrite

async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];

rewrite는 destination대신 source를 쓰는 것을 말한다.

4. Server Side Rendering

react로 코드를 구현했을 경우 로딩중일 경우에 isLoading을 가져와서 사용한다. 그런데 Next.js의 경우 SSR을 사용하는 것이 큰 장점이다. 무슨 말이냐면 pre-rendering이라는 기능을 제공한다. 이 기능은 html을 미리 랜더링한다. html을 미리 생성하고 최소한의js를 연결시킨 후 클라이언트에서 요청이 들어오면 해당 html을 로드하면서 나머지js를 불러와 화면에 렌더링 시켜준다.

index.js

export async function getServerSideProps() {
  const {results} = await (
    await fetch(`http://localhost:3000/api/movies/`)
  ).json();
  
  return {
    props: {
      results
    },
  };
}
  • page를 사용자가 요청하면 getServerSideProps 를 먼저 실행후 프론트가 서버에 직접요청 후 데이터를 받아와서 page 컴포넌트에 date를 props로 전달하여 렌더링한다.
  • getServerSideProps 는 계속 데이터가 바뀌어야하는 페이지의 경우 사용한다.
  • 함수가 반환하는 데이터는 페이지 컴포넌트의 props로 전달된다.
  • 서버 측에서만 실행되며 브라우저에서는 실행되지 않는다.
html 파일에 데이터가 있기 때문에 SEO에 좋다.

index.js

export default function Home({ results }) {
  const router = useRouter();
  const onClick = (id, title) => {
    router.push(`/movies/${title}/${id}`);
  };

getServerSideProps에서 props로 넘겨준 값을 함수에서 받아와서 사용한다.

그리고 나서 페이지를 로드해서 페이지 소스를 보면 api에서 미리 받아온 값을 볼 수 있다.

api에서 받아온 값
api에서 받아온 값

 

728x90
반응형
저작자표시 비영리 변경금지
  1. 1. Patterns
  2. 2. Fetching Data
  3. 3. Redirect and Rewrite
  4. 4. Server Side Rendering
'Next.js' 카테고리의 다른 글
  • [Next.js] SSG 개념 알아보기
  • [Next.js] 노마드 코더 강의정리 part.3
  • [Next.js] 노마드코더 강의 정리 Part.1
  • [Next.js] 하이드레이션(hydration) 개념 알아보기
Uheeking
Uheeking
안녕하세요. react, flutter, node.js에 관련해서 글을 쓰는 블로그입니다.
Uheeking
Uheeking의 it로그
Uheeking
전체
오늘
어제

공지사항

  • 분류 전체보기 (254)
    • React (48)
    • Node.js (32)
    • Next.js (22)
    • Vue.js (15)
    • javascript (3)
    • Django (19)
    • etc (23)
    • Flutter (30)
    • Error (16)
    • AWS (11)
    • docker & Kubernetes (32)
    • git (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
250x250

인기 글

태그

  • mosquitto
  • NEXT
  • next.js
  • SSR
  • 도커
  • 티스토리챌린지
  • error
  • firebase
  • AWS
  • 넥스트
  • 장고
  • sequelize
  • 플러터
  • docker
  • node.js
  • Express
  • useEffect
  • 오블완
  • flutter
  • Django
  • Create
  • Vue.js
  • supabase
  • 노드
  • 리액트
  • MySQL
  • Kubernetes
  • React
  • 쿠버네티스
  • Props

최근 댓글

최근 글

250x250
hELLO· Designed By정상우.v4.5.2
Uheeking
[Next.js] 노마드코더 강의 정리 Part.2

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.