[next.js] Next.js 강의노트

*패스트캠퍼스 -한 번에 끝내는 프론트엔드 개발 > Next.js로블로그 만들기 강의 노트*

Next.js 시작하기

폴더 생성

cd 폴더

npx create-next-app

 

프로젝트 구조

1. pages

프로젝트 안의 화면 모음

1. _app.js (_app.tsx)Component ⇒각각의 모든 페이지를 의미함.
2. 전역. 여기에 적용한 소스는 전역으로 적용됨.
3. index.js (index.tsx)
4. app.js 안에 있는 첫번째 화면 (실제로 보이는 화면)
5. styles

스타일 모음

pages/index.js 에서 Home.module.css를 사용

모듈로 만든 css는 import 해와서 styles.container 등으로 사용할 수 있다.

 

라우팅

스테틱 라우팅

라우터를 사용하지 않아도 자동적으로 라우팅을 지원한다.

/ : pages/index.js

/blog : pages/blog/index.js

index.js가 아닐 경우

/blog/first-post : pages/blog/first-post.js

다이나믹 라우팅

[ ] 괄호안에 텍스트가 있는 파일명이나 폴더명을 사용하면, 그 자리에 어떤 값이 들어오더라도 해당 파일을 읽는다.

[...all].js 는 아래에 depth를 더 두더라도 해당 파일을 찾게 된다.

하지만 스테틱 라우팅의 우선순위가 높다..!

/blog/*(/blog/hello-world) ⇒ pages/blog/[slug].js

→ 어떤 값이 들어오더라도..!

/*/settings (/foo/settings) ⇒ pages/[username]/settings.js

/post///*.....(/post/2020/id/title)⇒ /pages/post/[...all].js

→ depth가 얼마나 있든....!

다이나믹 라우팅의 segment 값 가져오기

[slug].js 에서...!

useRouter from “next/router”

const router = useRouter();

const {slug} = router.query

⇒ router>query>slug에 있음.

주소에 slug 위치에 있는 값을 가져올 수 있다.

[...all].js의 경우 all은 배열로 들어온다.

 

데이터 가져오기

Static-site Generation

정적페이지로 만들어서 제공.

미리 모든 데이터를 준비한 후 정적페이지로 만들어 파일단위로 서빙.

빌드할 때 결정이 된다.

Server-side Rendering

서버형태로 제공.

해당 페이지를 서버에서 바로 생산해서 내려줌. (노드서버)

요청을 받았을 때 데이터를 생산한다.

 

데이터 가져오는 항목

1. getStaticProps (Static Generation) : Fetch data at build time

        ⇒ 빌드할 때 어떤 데이터를 가져와서 페이지로 만들지 결정됨. 파일 안에 export function getStaticProps(){}로 props               를 json 형태로 리턴하면 데이터 가져올 수 있다.

 

   2. getStaticPaths (Static Generation) : Specify dynamic routes to pre-render pages based on data.

        ⇒ 다이나믹 라우팅을 만들 때 어떤 path를 만들지 결정됨.

            파일 안에 export function getStaticPaths로 paths>params, fallback을 리턴하면 데이터로 path를 만들 수 있다.

             fallback : true(라우팅에 맞지만 path에 맞지 않을 경우 404가 나오지 않음) / false (paths에 없으면 404)

const paths = posts.map((post) => ({
	params: {
    	slug: post.slug,
    },
}));

return {
	paths,
    fallback : false,
};

            이렇게 하면 paths 크기 만큼의 스테틱 파일들이 생김.

             getStaticProps와 함께 쓰면 useRouter가 필요없다.

 

   3. getServerSideProps (Server-side Rendering) : Fetch data on each request.

        ⇒요청을 받았을 때 데이터를 가져옴.

 

스타일 적용하기

link로 다른 폰트 등을 Head에 적용하고자 할 때에는 _document를 사용한다.

pages/_document.js를 생성하면 HTML 파일을 만들어 적용할 수 있다.

 

next.config.js

next.js의 설정파일.

trailingSlash:false, ⇒url 마지막에 /가 무조건 사라짐 env:{ MEGAHRD_URL :'www.megahrd.co.kr' }

⇒ 환경변수 설정. process.env.MEGAHRD_URL로 사용한다. 보통은 하드코딩하지 않고, 다른 곳에서 끌어다가 설정한다.

항상 next.config.js를 수정하면 서버를 내렸다 올려야 한다.

 

배포방법 이해하기

Server-side Rendering (SSR)

npm run build ⇒ next build 라는 명령어가 실행되고 프로덕션 모드로 빌드가 진행된다.

빌드 완료된 후 npm start

프로덕션 모드로 실행된다. 서버사이드 랜더링으로 실행된다.

최초에 서버사이드 랜더링으로 실행되지만, 이후 페이지를 옮길때에는 Client-side Rendering(CSR)으로 변경되므로 속도가 매우 빠르다.

주소로 page/api 안의 파일을 호출할 수 있다. localhost:8080/api/hello

Static-site Generation (SSG)

package.json에서 “build”에 값을 “next build && next export”로 수정

npm run build ⇒ out 폴더가 생긴다. 스태틱 사이트로 생긴 폴더.

npx serve out 을 실행하면 localhost:5000으로 실행된다.

하지만 api를 호출할 수 없다.

스태틱한 페이지로 만들어진 파일을 cdn 에 올려 배포하면 서버 성능과 트래픽에 관계없이 운용할 수 있다.