Next js 는 왜 사용 하는가?
Next js 는 react 에서 서버 사이드 렌더링을 위해서 사용됩니다.
서버 사이드 렌더링을 할때 이점이 있습니다.
- 기존 리액트는 CSR(클라이언트 사이드 렌더링)으로 많이 제작하게 됩니다.
클라이언트 렌더링의 경우 모든 js파일을 로드하고 사용자는 웹을 보게 되는데 사용자 측에서 로딩을 하기 때문에 초기에 로딩시간이 길어질수가 있습니다.
이를 해결하기 위해 SSR 은 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 로딩시간이 줄어들게 되어서 해결할수 있습니다.
- SEO 문제 가 가장 큰 문제로 여겨지고 있습니다.
앞서 말한대로 CSR로 로딩하기 위해서는 우선 HTML,CSS 를 우선으로 다운 받고 그다음에 JS를 입히는 방식으로 로딩을합니다. 하이드레션이라고도 합니다.
SEO는 (Search Engine optimization) 으로 검색 엔진을 할때 필요합니다.
CSR로 로딩할경우 자바스크립트가 로드 되지 않은 경우 검색엔진에서 스캔되지가 않않아 검색으로 아무 페이지도 걸리지 않게 됩니다.
이를 해결하기 위해 서버측에서 JS,HTML,CSS를 만들어 컨텐츠를 직접 업로드 함으로 검색엔진에 게시글이 걸리게 됩니다. 또한 Mata 태그를 자유롭게 추가하므로 SEO를 용이하게 할수 있습니다.
구조
기존 리액트는 app.js에만 있었는데 next js는 document.js, app.js가 있습니다.
_document.tsx | _document.js
메타 태그를 관리 하거나 GA, 웹타이틀을 관리할수 있습니다.
이전에 포스팅 올린 것처럼 styled component 처럼 렌더링 되기전에 설정을 해줄수도 있습니다.
Pages폴더 아래에 있습니다.
이곳에서는 console은 서버에서만 보이고 클라이언트에서는 안보입니다.
render요소는 반영하지만 js는 반영하지 않기 때문에 콘솔이 안보입니다.
훅도 사용되지 않습니다.
_app.js | _app.tsx
기존 리엑트의 app.js 와 비슷합니다.
최초로 실행되는 것은 _app.js 이며 component, pageProps를 받습니다.
getInitialProps 로 받은 것이 pageProps입니다.
이다음에 _document.tsx | js 가 실행됩니다.
라우팅 시스템
react에서는 라우터를 외부라이브러리를 활용해서 사용했는데 기존 내장으로 라우팅 기능이 됩니다.
Pages 페이지에 js 파일을 만들면 만든 파일의 이름으로 라우팅이 가능합니다.
페이지 이동하기
보통은 a 태그를 사용하나 next에서는 Link를 사용합니다.
a태그를 Link 태그로 감싸줍니다.
<Link href=“/page”>
<a>Page</a>
</Link>
// 동적 link시 [] 사용
<Link href=“/page/[address]">
<a>Page</a>
</Link>
prefetching
Link 속성중 prefetching 을 넣어주면 데이터를 먼저 불러온 다음에 라우팅을 시작할수 있습니다.
<Link prefetching href=“/page/[address]">history 사용
React-router-dom 과 비슷합니다.
import { useRouter } from "next/router";
const router = useRouter();
console.log(router.query.id)
router.prefetch(‘/pages’) // prefetch기능도 사용이 가능합니다.
Router.push(‘pages’)동적 컴포넌트 / 정적 컴포넌트
간단하게 설명해서 query 값이 있을경우 달라지는 값으로 페이지를 표시한다는 뜻이다.
동적 컴포넌트의 예시로는 쇼핑몰의 페이지에서 각 개별 페이지를 클릭했을때의 상세 페이지라고 생각하면 좋다.
기본 적인 틀은 같지만 내용 구성들만 달라지기 때문이다. 각 값들은 받아오면 되니까.
동적 컴포넌트를 만들때는 pages 컴포넌트 제목에 괄호를 넣어주면 동적 컴포넌트가 된다.
[id].js 단적인 예시지만 이렇게 사용하면 된다.
경로는 /pages/[id].js 이렇게 된다.
정적은 말그대로 기본 컴포넌트 페이지 이다.
리다이렉트 구현 (redirection)
일단 두가지 방법이 있었다.
첫번째 방법 (쿼리 사용)
첫번째로 각 컴포넌트에 에서 query 값을 판별해서 아닐시에 리다이렉트 시키기
예시) 로그인 페이지로 이동시키고 로그인 이후에 기존 페이지로 리다이렉션 시키기
//router.asPath 를 활용하면 절대 경로를 보여준다.
const router = useRouter();
const currentURL = router.asPath;
// 이전 페이지 주소 가지고 로그인 페이지로 이동
if(!authorization) {
router.push(`/login/?returnUrl=${currentURL}`) //query작성 시 /? 이렇게 적는다
}
//로그인 이후에 returnUrl 값으로 이동시킨다.
if (router.query.returnUrl) {
router.push(returnUrl)
} 두번째 방법 config js 설정
로그인도 안된 상태에서 주소를 입력해서 마이 페이지 로 간다던가 하면 곤란해진다.
이렇기 때문에 next.js는 redirect 기능을 제공해주는데 next.config.js 파일에서 설정할수 있다.
루트에서 next.config.js 파일을 만들어준다.
//next.config.js
const nextConfig = {
...
async redirects() {
return [
{
source: '/login',
destination: '/',
permanent: true,
},
{
source: '/error',
destination: '/',
permanent: true,
},
];
},
...
};
module.exports = nextConfig;
source 에는 접근을 막을 페이지, destination 에는 redirect 할 페이지를 적어주면 된다.
permament 는 영구적으로 redirect 할 지 여부를 정하여 http 상태 코드를 307 혹은 308로 넘겨준다.
기본 개념에 대해서 알아봤다. 특히 라우트 에 대해서 알아봤는데 또 많은 사항들이 있다.
다음 포스팅에서는 getInitialProps 에 대해서 알아보도록 하자.
