---

Page

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;

---

Layout

React.Children을 사용해 각각의 페이지들의 공통 Layout을 적용

pages디렉토리의 파일들을 개별적으로 Layout을 적용한다면 코드의 중복, 유지보수성 측면에서 문제가 발생할 수 있다.

그래서 공통의 Page Layout을 담당하는 AppLayout.js파일을 생성하여 관리한다.

AppLayout.js파일은 페이지가 아닌 컴포넌트이기 때문에 pages폴더가 아닌 다른 폴더에서 생성한다, 이 때 폴더명은 변경 가능하며 해당 포스팅에서는 components폴더를 사용하겠다.

React.Children

컴포넌트에서 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;

---

next / Link

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>

---

참고 자료

Next.js 공식문서
React로 NodeBird SNS 만들기 - 제로초