nomad coder next js 시작하기 완료
** 알게 된 것
* 시작
- npx create-next-app@latest로 폴더 생성
- npm start dev 로 시작
* library vs framework
- library : 개발자가 사용하는 것. library를 불러와서 library를 사용해서 어떤 것을 함.
원할 때 언제든 어떤 방법으로든 부르면 됨.
- framework : 내 코드를 불러오는 것. 특정한 규칙을 따라서 특정한 걸 해야함.
* pages 폴더
- 파일의 이름이 url이 되기 때문에 중요하고, 컴포넌트 즉 파일 안에 있는 함수의 이름은 중요하지 않음.
- 유저에게 보여주고 싶은것은 pages 폴더에서 export default function으로 설정
-앱의 홈은 기본적으로 index.js에서 나온다.
* rendering
- client-side render: 나의 브라우저가 유저가 보는 UI를 만드는 모든 것을 하는 것.
브라우저가 자바스크립트를 가져와서 client-side의 자바스크립트가 모든 UI를 만듦
브라우저가 HTMl을 가져올 때 빈 div를 가져오고 그 후 브라우저가 모든 자바스크립트를 요청하고 자바스크립트와 react.js를 실행시킴. 그 후 앱이 유저에게 보여짐.
- next.js의 경우 유저가 매우 느린 연결을 하고 있거나 자바스크립트가 완전히 비활성화 되어있어도 유저는 HTML을 볼 수 있음. 이미 HTML안에 내용이 들어가있음.
- nextjs는 pre-redering함. 즉 유저는 초기상태의 component로 된 미리 생성된 HTML 페이지를 보게 됨.
-nextjs는 _app.js를 확인하고 index.js를 렌더링함. 즉 _app.js는 청사진임.
* routing
- navigation bar을 만들 때 페이지를 이동하는 데 쓰는 컴포넌트 : Link
(import Link from "next/link")
- Link에는 className 같은 게 적용되지 않음. 단지 페이지 이동만을 위해 쓰이는 태그. 따라서 Link 안에 a 태그를 넣어서 a 태그에 부가사항을 적용한다.
* redirect
- 한 페이지에서 다른 페이지로 갈 수 o
- 아예 다른 url로 가는 것도 가능
- source, destination, permanent에 대한 요소를 넣어야함
return [{source: "/old-blog/:path*", destination: "/new-sexy-blog/:path*", permanent: false,},];
* rewrite
-유저를 redirect하지만 url이 바뀌지않음
- source, destination 요소
- rewrite을 통해서 API Key를 숨길 수 있다.
* server side rendering
export async function getServerSideProps(){}
- 함수 이름은 무조건 getServerSideProps로 고정
- 이 함수 안에 있는 코드는 무조건 server에서 돌아감
* routes
- '/moives/all' 이라는 url을 쳤을 때 나오는 페이지는 pages폴더 안에 있는 movies 폴더 안에 있는 all.js임.
- '/movies' 이라는 url을 쳤을 때 나오는 페이지는 pages 폴더 안에 있는 movies 폴더 안에 있는 index.js임
- 만약 url에 변수 이름이 들어가게 하고 싶으면 [id].js 이런식으로 만들어주면됨 (id는 변수명)