next는 페이지 만들기도 엄청 쉽네?

이전 남긴 글에서는 next가 폴더기준으로 route설정을 하는 것 같다고 적었는데 아니였다.

file로 인식을 하는거시여따!!!!

이렇게 about.js 파일을 pages 폴더 안에 만들어봤다.

코드를 적으면서, next가 / 뒤 주소를 뭘로 정할지 궁금했다.

컴포넌트 이름은 Potal로 만들고 파일을 about.js로 만들었다.

3000/about 으로 접숙했을 때 about이 잘 뜨고있다.

근데 여기서 또 궁금한게 생겼다.

저 export를 지우면?

에러가 나는거슬 볼 수 있다.

export를 해주면 똑똑한 next가 알아서 import를 해서 routing을 해주는 것 같다.

오호라..좋은걸?

이런식으로 위에 abc.js도 만들어줬고 3000/abc 로 접속해도 페이지가 잘 뜨고 있다.

 

근데, index.js 파일은 어떨까? 3000/index 를 쳐봐도 나오지 않는다.

그렇다... index.js는 Home의 역할을 하는 것,

 

그리고 next는 404page도 지원해준다.

route에서 이거 설정해주려면 또 404page 를 꾸미고..router 파일에서 설정코드 써주고 해야되는데

없으면 자동으로 나온다.

 

만약 jsx 문법을 사용해도 react를 따로 설치하거나 어디서 import 해올 필요가 없다.

그냥 쓰면 된다.

근데 react의 hook을 사용하고 싶다면 import 해와야 한다고 한다.

자동완성도 잘 된다.

 

 

 

정리를 하자면...

1. next는 file system 기반의 routing을 제공해준다.

2. 컴포넌트 이름은 파일 이름과 달라도 URL에 영향을 끼치지 않는다.

3. file 의 이름이 곧 URL

3. 컴포넌트를 export default 해주면 똑똑한 next가 알아서 캐치하여 페이지로 만들어준다.

(리액트에서는 react-router를 설치하고.. router.js 파일을 만들어서 코드를 적고.. 페이지 주소를 설정해주고 컴포넌트를 export하고 import해서..등등.. 많은 과정을 거쳐야 함)

4. index.js 파일은 Home의 기능을 한다(주소 뒤에 /~~~ 안붙혀야 됨)

5. 리액트를 따로 설치 할 필요 없다.

6. JSX 문법을 기본으로 지원해주며 이 때에는 따로 react를 import 해올 필요 없다.

7. hook을 사용할 시 자동완성도 너무 잘 되서 그냥 사용하면 된다. (import 필요, react에서도 import 해서 사용했듯이..)