next.js4 getStaticPaths [동적 라우팅] 페이지 path는 외부 데이터에 달려있다. 다이나믹 라우팅 [id].js 일 경우 사용한다. getStaticProps 사용해주면 반드시 getStaticPaths 있어야 한다. getStaticPaths 를 사용하기 전에 라이브러리 하나만들자. 반드시 [ { params: { } } ] 배열안에 object 인 params key 값을 가져야한다. fallback : true, path: [ {params : { id : '1' }} ] ... 3 현재 4번에 해당하는 글이 없다면, fallback : true 일 경우 서버로 부터 불러온다. 2021. 10. 25. Pre-rendering next.js 는 Pre-rendering 방식이다. pre-rendering 이란 것은 초기에 html을 먼저 보여준다. 그 후 js 를 로드하는 방식이다. CSR 리액트인 경우 초기에 모든 페이지를 로드하기 때문에 흰 화면이 오랜시간 유저에게 보인다. 고로 next.js 를 사용 Pre-rendering 의 장점은? A.검색엔진 최적화. B.초기 내 앱에 JS 없이 작동 pre-rendering method 2개 존재. 1. static generation 빌드타임에 서버에서 호출한다 npm run dev or yarn dev 할 경우 빌드 시작. 2.server-side-rendering html 이 생성된다 각각 요청에의해서. (재사용 X) 가장 중요한 핵심은, 넥스트 js는 각각의 페이지를 pr.. 2021. 10. 23. next.js에서 css사용해보자 next.js 에서 Image 컴포넌트가 따로 있음. Next.js supports CSS Modules using the [name].module.css file naming convention. Metadata 수정하는법 이제 next.js 에서 css 사용하는법 다른 라이브러리도 사용 가능. 반드시 이름.module.css 컨벤션 지켜야한다. 글로벌 css 파일은 항상 pages/_app.js 에서 임포트해야한다. 2021. 10. 22. 라우팅 하기 in next.js 라우팅을 어떻게 할까 ? pages 폴더 안에 있는 건 next.js 로 인해 자동으로 라우팅 해줌. No routing libraries are required. 넥스트js 는 코드스플리팅을 자동으로 해준다. Only the JavaScript for /posts/first-post is loaded. 코드스플리팅? 쉽게 말하자면 각각의 페이지들은 필요한 것들만 로드한다.https://parkjaeho.tistory.com/130 코드스플리팅 코드 스플리팅? SPA 에서 웹사이트가 방대하다고 가정한다면, 컴포넌트가 몇 만개가 될 가능성이 존재한다. 처음 비어있는 index.html 에서 웹팩을 사용해 번들링한 하나의 .js 페이지를 대기하면 페 parkjaeho.tistory.com 넥스트js는 페이지.. 2021. 10. 22. 이전 1 다음
