Next JS 에서는 Client Side Routing 으로 페이지를 연결하여 Single Page Application 처럼 만들어 네트워크 개입을 없앤다.
새로운 페이지를 만들고 다른 페이지로 연결할때 Link 컴포넌트를 쓴다 쓰는방법은 예제로 보여주겟다.
Link 사용법
index.js
import Link from "next/link" // Link 컴포넌트를 next/link 불러오자.
export default function Home() {
const users = [ // 동적으로 라우팅 하기 위해서 사용하는 더미데이터.
{ id: 1, name: "James" },
{ id: 2, name: "Martin" },
{ id: 3, name: "Danial" },
];
return (
<div >
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/about">
<a>About Us</a>
</Link>
</li>
<li>
{users.map((user) => ( // 동적으로 링크 생성하기.
<ul key={user.id}>
<Link href={`/user/${user.name}`}>
<a>{user.name}</a>
</Link>
</ul>
))}
</li>
</ul>
<h1>Welcome!</h1>
</div>
)
}about.js
import React from 'react';
const About = (props) => {
return <div>
<h1> About page</h1>
</div>;
};
export default About;[user].js localhost//user[user].js
import React from 'react';
import { useRouter } from 'next/router';
const User = (props) => {
const router = useRouter();
const {user} = router.query;
return <div>
<h1>안녕하세요 {user}님.</h1>
</div>;
};
export default User;index.js:
about.js
user/[user].js
Pre-Fetch,Code-Splitting 간단한 이해
최초 페이지를 요청할때는 코드를 SPA 처럼 한꺼번에 모든것을 로드하는것이 아닌 코드를 자동으로 분할해서 최초 페이지에 필요한 내용들만 로드한다. 즉 다른 페이지의 코드는 호출되지 않는다 따라서 Code Splitting 이 있다면 아주많은 페이지가 있어도 빠르게 유저한테 화면을 보여줄 수 있는 장점이 있다.
Next js는 build 시점에 Link 컴포넌트가 브라우저에 표시될 때마다 백그라운드에서 링크된 페이지의 코드를 자동으로 설정한다. Link 컴포넌트 를 활용해 Link로 연결된 페이지를 미리 로드해줘서 Link 를 따라서 해당 페이지로 이동하면 SPA 와 비슷하게 빠른 페이지 전환 효과를 볼수가 있다. 이것이 Next 에 Pre-Fetching 기법이다.
Head 태그
nextjs는 순수react-app과는 다르게 index.html 파일이 없다. 그래서 태그를 기본으로 저희가 직접 조작을 해야한다. 일단 모든 페이지에 태그를 적용 시키기위해서 pages/_app.js 컴포넌트에 적용을 시켜 볼것이다.
_app.js
import '../styles/globals.css'
import Head from 'next/head' //Head 컴포넌트 import 해주고
function MyApp({ Component, pageProps }) {
return <>
<Head>
<title>NodeBird</title> //헤드 관련 태그 다 사용가능
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<Component {...pageProps} />
</>
}
export default MyApp다른 페이지에서는 다른 <Head/>태그 내용 바꾸고 싶으면 해당 페이지 컴포넌트가서 바꾸면된다.
about.js
import React from 'react';
import Head from 'next/head';
const About = (props) => {
return <div>
<Head>
<title>Next | About</title> // 이런식으로 바꾸고싶으면 또 설정해주면 덮어씌어진다.
</Head>
<h1> About page</h1>
</div>;
};
export default About;index.js
About.js
그리고 그 유명한 오픈 그래프를 이용해서 sns에 url을 올리면 미리보기가 가능한 Open Graph 메타 설정도 next가 제공하는 컴포넌트 하나로 가능하다
추후에 Open Graph 도 배우고 서버 엔진 최적화 작성 하는방법도 배울 계획이다.
