Next.js
Library VS Framework
Library - 개발자가 library를 불러와서 내가 그것을 사용하여서 무엇을 만든다.
Framework - 나의 코드를 불러오는것(특정한 규칙을 따라서 특정한것을 해줘야하는경우도 있다.)
pages
- 파일의 이름이 url을 결정하게 된다.
ex) about.js라면 localhost:3000/about url을 들어가게되면 그 파일이 실행되게됨 - Component의 이름은 중요하지 않다.
- export default는 꼭 해줄것
- index.js는 /의 url 경로를 가지고잇다 - localhost:3000/
next.js의 장점
앱에 잇는 페이지들이 미리 렌더링이 된다.
client side render
나의 브라우저가 유저가 보는 UI를 만드는 모든것을 한다.
브라우저는 보통 빈화면, 태그를 가지고 오게되고.
브라우저가 자바스크립트를 다운받아서 client-side의 자바스크립트가 모든 UI를 만들게된다.
server side render
네트워크가 느려도 유저는 html을 볼수가있다.
미리 랜더링이 되게 되는것.
초기상태의 component로 된 서버에서 미리 생성된 HTML 페이지를 보게되고
react.js가 다운로드 된다음 동작자체도 잘되게된다.
- 즉 페이지의 모습인 HTML은 서버에서 만들어져서 웹으로 가게되고 웹의 화면에는 원래의 화면처럼 잘 나타나게된다.
그래서 유저는 UI를 그대로 볼수가 잇게되는것이고, js 다운로드가 끝나면 동작이나 함수 자체가 실행될수있도록
나머지 기능들이 입혀지는것.
.module.css
module.css
(
.nav {}
)
import styles from "./XXXX.module.css"
<div className={styles.nav}>style.jsx
<style jsx>{`
a{
color: white;
}
.active{
color: tomato;
}
`}</style>컴포넌트에 독립적으로 적용되게 된다.
_app.js -> CustomApp
가장 먼저 자동적으로 확인하는 파일.
global.css
_app.js가 있는곳에는 모든 Global Styles를 임포트 할수있다.
하지만 다른 파일에서는 css를 할수없으며,
module.css로 import 시켜야한다
Next.js의 Header -> import Head from "next/head";
/public 폴더
public 폴더에 접근하기위해서는 public 안에 vercel.svg라는 파일이 잇다고 가정할때
아래와 같이 접근경로를 절대경로나 상대경로로 나타내지않고 위와같이 나타내면 접근이 가능하다.
<img src="/vercel.svg">Next의 기능중 API KEY 숨겨주기
next.config.js에 설정을 해주어 redirect를 하게 만들면
API KEY를 나타내지않아도 숨길수있게된다.
getServerSideProps
이함수를 사용하기전까지는 사전에 생성되는 함수에는 어느 loading같은것만 나타날뿐
다른 html이 나타나지 않았다.
이코드를 생성하고나니 html이 source로 나타나게 되었다.
이것은 api에서 데이터를 다 받아온뒤(React 코드가 실행이 끝난뒤) 화면을 나타내어 주는것이라고 볼수있다.
fecth, 데이터베이스 요청, API 불러오기, API key 사용하기등을 이곳에서 사용수있다.
백앤드에서 코드를 구현한다고 생각하면 되고,
export를 꼭 붙여주어야한다
export function getServerSideProps(){
}DynamicURL
Next.js는 pages안에다가 파일을 넣어주면 url이 된다.(Framework에서 지정해두었음)
Pages 폴더안에 원하는 URL의 파일 폴더를 만들어주면된다.
만약 moives/all라는 url을 지정해주려면
/movies 폴더안에 index.js 및 all.js를 만들어주면 둘다 파일을 url을 만들어줄수있다.
DynamicURL을 사용하기위해서는 /movies/123 이런식의 URL이 필요하다면
[id].js 이런구조의 그 폴더안에다가 만들어주면된다.
DynamicURL - [필요URL].js
navigate
Link로
router.push를 사용
Next.js의 url로 데이터 넘기기
router.push(
{
pathname : `/movies/${id}, //원하는 path
query: {
title: "potatos", //넘기기 원하는 데이터 query
},
`/movies/${id}` //url을 masking 시켜줄 옵션
};
)catch all url
[...id].js이라고 하게되면 뒤에 어떤 url들이 다 들어오더라도 파라미터로 들어오게 해줄수있다.
