2021. 8. 4. 00:07ㆍ개발/Next.js
이번 Tutorial을 통해 배울것은 크게 아래 3가지로 나뉜다.
1. file system routing을 이용한 새로운 페이지 추가
2. 'Link' 의 사용법
3. code splitting, prefetching
2021.08.03 - [개발/Next.js] - [Next.js] 1. 프로젝트 생성 및 시작하기 에서 만들었던 프로젝트를 그대로 사용한다.
1. Pages in Next.js
Next.js 에서의 페이지란 각 디렉토리의 파일을 뜻한다. 이게 무슨 소리인가 하면 Node.js Express 에서는 원하는 routes 파일을 원하는 routes 폴더 내부 원하는 위치에 만들고 app.js 에서 명시해주었다면, Next.js 에서는 폴더와 파일 그자체가 route를 뜻하게 된다.
예를들어,
'page/index.js' 라는 파일이 있다면, / 를 뜻하고
'page/posts/first-post.js' 라는 파일이 있다면, '/posts/first-post' 를 뜻한다.
어떻게 동작하는지 직접 해보는 것이 좋다.
posts 디렉토리를 pages 디렉토리 하위에 생성한다.
그리고 posts디렉토리에 first-post.js 파일을 생성한다.
그리고 아래와 같이 입력한다.
export default function FirstPost() {
return <h1>First Post</h1>
}
그러면 최종 프로젝트 모습은 아래와같이 보이게 된다.
여기까지 한 다음, npm run dev 명령어를 통해 서버를 실행시켜 준다.
그리고, localhost:3000/posts/first-post 경로를 입력해주면 아래와 같이 뜨게 된다.
pages 하위에 만든 디렉토리와 파일이 URL path를 뜻한다는 것을 알 수 있다. (놀랍다.)
2. Link 사용
HTML 에서 링크를 걸때 보통 <a> 태그를 사용해서 페이지 이동을 할 수 있도록 구성했었다.
Next.js 에서는 'Link' 라는 녀석을 사용해서 client-side 에서의 페이지 이동을 할 수 있도록 지원한다.
다시 'pages/index.js' 파일로 이동해서 Link 를 import 해준다.
import Link from 'next/link'
그리고, h1 태그를 아래와 같이 수정한다. ({' '} 는 빈 공간(space)을 나태내주기 위해 사용되었다.)
<h1 className="title">
Read{' '}
<Link href="/posts/first-post">
<a>this page!</a>
</Link>
</h1>
이렇게 main page에서 first-post page로 이동할 수 있게 추가해주었으니
first-post page에서 main page로 이동할 수 있게 'pages/posts/first-post.js' 에도 아래와 같이 수정해준다.
import Link from 'next/link'
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
)
}
참고
HTML 에서는 <a href="blahblah"> 이렇게 사용했지만, Next.js Link 에서는 <Link href="blahblah"> 쓰고 내부에 <a> 태그를 넣는 것을 볼 수 있다.
여기까지 작성한 후 main page로 들어가보면 first-post로 이동할 수 있는 링크가 생겨있고, first-post page로 이동해보면, main page로 다시 돌아올 수 있는 링크가 생긴것을 확인할 수 있다.
'Link' 를 사용해서 페이지를 이동하게 되면, full page를 reloading하지 않고, 페이지 이동을 할 수 있다.
chrome 개발자 도구(F12) 를 통해서 <html> 태그에 background : yellow css 를 넣은 후 페이지를 이동해보면 back ground color가 그대로 남아있다. 이 것은 전체 페이지를 다시 로딩하지 않았다는 뜻이다.
만약 <a> 태그를 이용하여 페이지를 이동했다면, 전체 페이지가 다시 로딩되어 background 속성이 업데이트 된다.
3. Code splitting, prefetching
- Code Splitting : Next.js 에서는 code splitting을 자동으로 동작한다. 그래서 사용자가 요청한 페이지에 대해서만 rendering 하므로 수백개의 페이지가 존재하더라도 빠르게 로딩할 수 있다. 이 말은 다른 페이지에 오류가 있어 동작하지 않더라도 그 페이지를 제외한 페이지는 모두 정상 동작할 수 있음을 뜻한다.
- Prefetching : 지금까지는 npm run dev 명령어를 통해 dev option으로 서버를 구동했지만, production build option으로 Next.js를 빌드하게 되면, 'Link' 컴포넌트가 나타날때마다 백그라운드에서 미리 prefetch 시켜둔다. 그래서 production level 에서는 이미 백그라운드에 페이지를 구성해두었기때문에 'Link' 를 통한 페이지 이동이 즉각적으로 이루어질 수 있게 된다.
요약
- Next.js 에서 routing은 directory와 file 그 자체로 명시하고, URL을 구성할 수 있다.
- 'Link' 를 통해 Client-side Navigation이 가능하게 도와주고, 전체 페이지를 재로딩하지 않아 빠르게 이동할 수 있다.
- code splitting과 prefetching(production option) 을 통해 App의 성능을 자동으로 최적화 시킬 수 있다.
'개발 > Next.js' 카테고리의 다른 글
| [Next.js] 3. Assets, Metadata, and CSS (0) | 2021.08.10 |
|---|---|
| [Next.js] 1. 프로젝트 생성 및 시작하기 (0) | 2021.08.03 |