pages

Next.JS의 pages폴더는 page를 구성하는 React의 component를 담아두는 곳이다.

page를 추가하는 법은 간단하다.
react의 component를 export하는 파일을 pages폴더 안에 두면 된다.

// page 추가 예
// about.js
export default function About(){
    return 'this is about page'
}

NextJS는 파일의 이름을 가져가 url의 이름으로 사용된다.

(예시 코드의 경우 파일명이 about이므로 url은 about으로 지정된다.)

주의해야 할 점은 파일의 이름이 url이 되는것 이기 때문에 component의 이름은 아무런 관련이 없다..

// about.js
export default function Chicken(){
    return 'this is about page'
}

예시 처럼 Chicken 이라던지 , Tomato, Lemon 등 어떤 이름들이 와도 NextJS는 파일의 이름으로 url을 사용한다.

반드시 export default를 해줘야 페이지를 만들어 준다.

만약 NextJS가 아닌 React로만 페이지를 만든다면
create react-app, React router DOM, router생성, routes 설계, component import 등 많은 것들을 해야하는데, Next.JS는 이 모든 것들이 다 준비되어 있다고 생각하면 된다.

index

pages의 index.js는 index라는 파일의 이름을 url로 설정하지 않는다.
(localhost:3000/index 로 갈 경우 404에러)

index.js는 앱의 홈(홈페이지)을 뜻한다.
localhost:3000 혹은 localhost:3000/ 주소를 사용한다.

jsx

jsx를 쓰고 있다면 react를 import할 필요가 없다.

export default function Home(){
    return <div><h1> Home Page</h1></div>
}

위 처럼 react를 import하지 않고도 파일명을 jsx로 바꾸지 않아도 잘 동작한다.

그러나 useState, useEffect 등 react 메소드를 사용하려면 react를 import해야 한다.