next.js 의 page 란 무엇일까?

개요

• next.js 에서 page 란, pages 디렉토리 내부에 있는 .js, .jsx, .ts, .tsx 확장자를 가진 파일에서 export 된 리액트 컴포넌트 를 말한다.
• next.js 프로젝트 내부의 pages 디렉토리에 리액트 컴포넌트 파일(component.js)을 두면, next.js는 해당 파일을 읽어서 http://localhost:3000/component 경로에 접근했을 때, 해당 컴포넌트를 제공한다.

예시

pages/about.js 라는 리액트 컴포넌트를 생성하면 http://localhost:3000/about에 접속했을 때 about.js가 보이는 개념이다.

const About = () =>(
        <div>
            안녕하세요. jake seo입니다.
        </div>
    );

export default About;

next.js page 의 특징

• next.js에서는 리액트 컴포넌트를 작성할 때 import React from "react"를 작성할 필요가 없다.
  • 단, 리액트의 hooks와 같은 다른 기능을 사용할 때는 import가 필요하다.
• export 하지 않거나 리액트 컴포넌트가 아닌 js 파일을 작성해두면, 해당 URL에 접근했을 때 에러가 난다.
• 존재하지 않는 페이지를 입력하면, next.js가 기본으로 제공하는 404페이지로 안내한다.
• index라는 이름은 예약되어 있다. URL에 아무것도 입력하지 않은 기본 페이지를 나타낼 때 사용된다.
  • http://localhost:3000/index와 같은 경로로 접근 불가능하다.