Next js 의 pages

pages 파일명과 URL

pages 폴더안에 index.js파일을 만들고 다음과 같이 작성해봅니다.

 

 

저장하고 index 페이지인 localhost:3000을 보면 다음과 같이 화면이 보이게됩니다.

next js 는 index.js를 메인페이지로 인식을 해서 url을 결정해줍니다.

 

 

두번째로,

pages폴더에 about.js 파일을 생성하고 다음과 같은 코드를 넣고

주소에 /about을 붙이면 작성했던 about us라는 글씨가 보이게됩니다.

여기서 해당 파일을 페이지로 쓰고 싶다면 react에서 컴포넌트를 만들때처럼

함수로 컴포넌트를 만들고 보여주고 싶은 내용을 return 문에 작성하고 export default로  내보내줍니다.

// About이라는 컴포넌트를 함수형으로 작성하고 export default로 내보내줍니다.
export default function About(){
    return "about us";
}

 

next js는 framework

여기에서 react js 와 next js 의 큰 차이점이 보이는데,

react는 작성자가 원하는대로 작성을 할 수 있고 포맷에 구애받지 않고 쓸수 있는것이 라이브러리이고,

next js는 위와 같이 정해져있는 포맷대로 개발을 하는것을 프레임워크라고합니다.

 

결과

next js는 pages폴더안 파일 이름이 url로 결정이 됩니다.

export default로 컴포넌트를 export 해야하고

설정한 컴포넌트의 이름은 영향을 받지 않습니다!