Next.js
는pages
폴더안에 작성된 파일을 컴포넌트랑 1:1매칭
Next.js
에서 Page는 pages
디렉토리의 .js
, .jsx
, .ts
, .tsx
...등의 파일로부터 export
된 React Component
이다.
각각의 Page는 파일명을 기반으로 route
되어 하나의 페이지로 사용된다.
아래 예제는 pages
디렉토리의 각각의 .js
파일을 route
하며 /파일명
으로 접근할 수 있다.
// pages/signup.js
import React from 'react';
const SignUp = () => {
return (
<div>회원가입</div>
)
};
export default SignUp;
// pages/about/login.js
import React from 'react';
const Login = () => {
return (
<div>로그인</div>
)
};
export default Login;
React.Children
을 사용해 각각의 페이지들의 공통Layout
을 적용
pages
디렉토리의 파일들을 개별적으로 Layout
을 적용한다면 코드의 중복, 유지보수성 측면에서 문제가 발생할 수 있다.
그래서 공통의 Page Layout
을 담당하는 AppLayout.js
파일을 생성하여 관리한다.
AppLayout.js
파일은 페이지가 아닌 컴포넌트이기 때문에 pages
폴더가 아닌 다른 폴더에서 생성한다, 이 때 폴더명은 변경 가능하며 해당 포스팅에서는 components
폴더를 사용하겠다.
컴포넌트에서
SubClass
를 사용할 때,SubClass
를 부르는 태그 안에 내용이children
에 삽입
AppLayout.js
파일에서 공통 Page Layout
을 설정한 뒤 각각의 페이지들은 children props
로 전달된다.
이 후 props
로 전달받는 컴포넌트는 propTypes
로 데이터 타입을 검사하여 에러를 방지한다.
만약 페이지별로 레이아웃을 다르게하고 싶다면 각각의 Layout
파일을 작성한 뒤 컴포넌트를 사용하고자 하는 레이아웃 태그로 감싼다.
아래 예제는 pages
폴더의 index
, profile
, sighup
파일의 레이아웃을 AppLayout.js
파일에서 공통적으로 관리한다.
// components/AppLayout.js
import React from 'react';
import PropTypes from 'prop-types';
const AppLayout = ({ children }) => {
return (
<div>
<div>공통메뉴</div>
{children}
</div>
)
};
AppLayout.propTypes = {
children: PropTypes.node.isRequired,
}
export default AppLayout;
// pages/index.js
import React from 'react';
import AppLayout from '../components/AppLayout';
const Home = () => {
return (
<AppLayout>
<div>Hello, Next!!</div>
</AppLayout>
)
};
export default Home;
// pages/login.js
import React from 'react';
import AppLayout from '../components/AppLayout';
const Login = () => {
return (
<AppLayout>
<div>로그인 페이지</div>
</AppLayout>
)
};
export default Login;
// pages/signup.js
import React from 'react';
import AppLayout from '../components/AppLayout';
const Signup = () => {
return (
<AppLayout>
<div>회원가입 페이지</div>
</AppLayout>
)
};
export default Signup;
Link
는 클라이언트 사이드에서 경로간의 이동 활성화
Link
는 페이지 간 이동을 위해 사용하는 컴포넌트이며 Next.js
에서 제공하는 자체적인 router Link
컴포넌트이다.
일반적으로 자바스크립트에서는 페이지 이동을 위해 <a>
태그를 사용하지만, Next.js
에서는 Link
컴포넌트를 사용한다.
아래와 같이 <Link>
태그에 href
속성을 작성한 뒤, <a>
태그를 중첩하여 사용한다.
// components/AppLayout.js
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link'; // Link 불러오기
const AppLayout = ({ children }) => {
return (
<div>
<div>
<Link href='/'><a>Home</a></Link>
<br />
<Link href='/login'><a>Login</a></Link>
<br />
<Link href='/signup'><a>Signup</a></Link>
</div>
{children}
</div>
)
};
AppLayout.propTypes = {
children: PropTypes.node.isRequired,
}
export default AppLayout;
<a>
태그의 target_blank속성HTML
의 <a>
태그의 taget = "_blank"
속성은 새창에서 페이지를 띄우는데 이 과정에서 보안상의 위협이 있다.
그래서 <a>
태그 사용시에는 rel = ”noreferrer noopener”
속성을 추가하여 창을 오픈한 유저 정보를 없애 보안을 강화하여 사용해야 한다.
<a href='http://localhost:3000/' target="_blank" rel="noreferrer noopener">Hello, Next!!</a>