패스트캠퍼스 챌린지 22일차 (Next.js 기본1)

22.2.14 (월) +22days

 

 

Learn 살펴보기

https://nextjs.org/learn/basics/create-nextjs-app

Learn | Next.js

Create a Next.js App

Navigate Between Pages

Assets, Metadat, and CSS

 

Code splitting and prefetching

Next.js does code splitting automatically, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially.

This ensures that the homepage loads quickly even if you have hundreds of pages.

Only loading the code for the page you request also means that pages become isolated. If a certain page throws an error, the rest of the application would still work.

Furthermore, in a production build of Next.js, whenever [Link](<https://nextjs.org/docs/api-reference/next/link>) components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background. By the time you click the link, the code for the destination page will already be loaded in the background, and the page transition will be near-instant!

 

코드들이 적절히 분리(code splitting) 되어 있고, 새로운 페이지에 접속할 때 필요한 만큼만 로드한다. 수백페이지의 서비스더라도 chunk가 크지 않다.

Link 태그를 사용했다면, 연결된 페이지 리소스를 미리 받아온다.(prefetching) production 모드에서 확인이 가능하다.

 

💡 Note: If you need to link to an external page outside the Next.js app, just use an <a> tag without Link.
If you need to add attributes like, for example, className, add it to the a tag, not to the Link tag. Here’s an example.

Image optimization

public 에 담아두고, next/image의 Image를 사용하면 img 태그를 사용하는 것보다 최적화를 해준다. 빌드타임에 영향이 없다.

 

CSS

styled-jsx / css / scss

tailwindcss도 적용 가능

CSS Modules

xxxx.module.css 이라는 이름으로 정해줘야 함

className의 유일성을 확보해줌

Global Styles

pages/_app.js

styles/global.css

공통으로 적용하고 싶다면, 공통 영역에 셋팅해야 함

Styling Tips

classnames 라이브러리

Next.js ⇒ 다양한 기능을 추상화해서 제공

Navigate / prefetching ⇒ <a> with <List> / code splitting

Image / Head ⇒ “next/image” / “next/head” - meta

built in styling / global ⇒ CSS modules / Sass / styled-jsx

 

 

 

 

 

22.2.14 +22days

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다