I am an potato!.

2 minute read

Nextjs 시작하기

pages 폴더

page폴더 안에 있는 파일명에 따라 router가결정된다.

about.js => /about

index.js

홈페이지와 연결, 앱이 시작하는 파일

페이지 간 클라이언트 측 경로 전환을 활성화하고 single-page app 경험을 제공하려면

nextjs 에서는 링크를 이동할때 <a>태그를 이용하면 안된다.

대신 nextJs에서 제공하는 <Link>태그를 이용하여야 한다.

이 <Link>태그에는 style이나 className 등등이 전혀 동작하지 않으므로 안의 <a>태그에 적용시켜주어야 한다.

<Link>
	<a className="home">Home</a>
</Link>

useRouter

앱의 함수 컴포넌트에서 router객체 내부에 접근하려면 userRouter()훅을 사용할 수 있습니다.

useRouter는 React Hook입니다.

즉, 클래스와 함께 사용할 수 없습니다. withRouter를 사용하거나 클래스를 함수 컴포넌트로 래핑할 수 있습니다.

library와 framework의 차이점

라이브러리와 프레임 워크의 주요 차이점은 “inversion of Control”이다

라이브러리에서 메소드를 호출하면 사용자가 제어할 수 있습니다.

하지만 프레임워크에서는 프레임워크가 사용자를 호출합니다.

라이브러리 : 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림

프레임 워크 : 파일 이름이나 구조 등을 정해진 규칙에 만들고 따름

Seo 등록하기

seo는 html에서 <head>부분에 해당한다.

이부분을 next에서 관리하려면

import Head from "next/head";

을 사용하면 된다.

예시

<Head>
      <title>{title} | Next Movies</title>
</Head>

image사용하기

image는 public폴더안에 넣어서 사용하는데 접근방법은

/img.png로 접근하면 public/img.png와 같은 의미로 사용된다.

next에서는 <img>태그가 아닌 next에서 제공하는 image component 사용을 권장하는데, 이 실습에서는 사용하지 않았다.

image component는 로컬이미지, 원격이미지를 사용할 때 좀 복잡해질수 있기 때문이다.

redirect & rewrite사용법

Redirects (URL변경됨)

Redirect을 사용하면 들어오는 request 경로를 다른 destination 경로로 Redirect할 수 있습니다.

Redirect을 사용하려면 next.config.js에서 redirects 키를 사용할 수 있습니다.

directs은 source, destination 및 permanent 속성이 있는 객체를 포함하는 배열을 반환하는 비동기 함수입니다. source: 들어오는 request 경로 패턴 (request 경로) destination: 라우팅하려는 경로 (redirect할 경로) permanent: true인 경우 클라이언트와 search 엔진에 redirect를 영구적으로 cache하도록 지시하는 308 status code를 사용하고, false인 경우 일시적이고 cache되지 않은 307 status code를 사용합니다.

next.config.js

async redirects() {
	return[
		{
			source: '/old/:path*',
			destination : "/new/:path*",
			permanent:false
		}
	]
}

Rewrites (URL변경되지 않음)

Rewrites를 사용하면 들어오는 request 경로를 다른 destination 경로에 매핑할 수 있습니다.

Rewrites은 URL 프록시 역할을 하고 destination 경로를 mask하여 사용자가 사이트에서 위치를 변경하지 않은 것처럼 보이게 합니다.

반대로 redirects은 새 페이지로 reroute되고 URL 변경 사항을 표시합니다.

async rewrites() {
	return [
        {
			source : '/api/movies',
			destination : '`https://api.themoviedb.org/3/movie/popular'
        }
	]
}

getSercerSideProps()

절때 이름을 바꾸며 안되는 함수, 안에 어떤 코드를 써도 서버에서 돌아가게 된다.

client 쪽이 아니라 server쪽에서만 동작하는 함수로 이를 이용하여 API key도 숨길수 있다.

 export async function getServerSideProps() {
	 const {result} = await (await fetch(`/api/movies`)).json();
	 return {
		 props : {
			 results,
		 }
	 }
 }

getSercerSideProps()은 server에서 실행되서 그 함수에서 무엇을 return 하던지, 그것을 props로써 page에 주게된다.

로딩 없이 화면이 render된다. 하지만 api가 돌아오기 전 까지 화면에 아무것도 보이지도 않는다.

dynamic url

nextJs에서는 따로 라우터를 사용하지 않고 폴더와 파일을 가지고 라우팅한다.

pages
ㄴmovies
	ㄴ all.js		// '/movies/all'
	ㄴ index.js		// '/movies'
ㄴhome.js			// '/home'

변수가 필요한 url?

[id].js와 같이 []을 사용한 파일명의 js파일을 만들어주면 이 파일이 pages/movies/[id].js라는 경로에 있는 파일일때 url 으로 movies/1222와 같이 접근이 가능하다.

Next.js에서 이것이 변수를 포함하는 Dynamic URL이다는 것을 알려주는 유일한 방법은 [] 대괄호를 사용하는 것이다.

Updated:

You may also enjoy