Next.js 기본 다지기1

2. Next.js 기본 

2.1 Next.js 제공사항

1) code가 bundler가 되야하며, 브라우저가 지원하지 않는 문법을 사용 할 때Babel이라는 compiler을 통해 transform을 해야한다.

2) code splitting처럼 optimization이 필요하다

3) performance확보하거나 SEO를 위해서 pre-render가  필요할 수 있다. 또한 SSR이나 CSR두개다 이용할 수 있다.

4) server-side code를 쓰며 너의 data Store에 React앱을 연결할 수 있다.

 

2.2 Terminal 에서 사용 문법

- 폴더로 이동 할 때 "cd 폴더명"

- 웹페이지 구동 할 때 "npm run dev"

- Visual Studio Code 열 때 " code 구동할 폴더 명" 

- 작업을 끝낼 때 "ctrl+c"

2.3 next.js-blog구현

1) Navigate Between Pages

a태그가 아닌 link를 추가하여 페이지 연결

- 속도 차이 

- link태그는 따로 호출없이 스무스하게 연결 (필요한 부분만 더 불러와서)

- a태그는 app을 새로 불러와서 느려짐

 

뒤로가기 만들기 

- Code splitting 과 prefetching

  Code splitting :  사용자가 웹페이지에 처음 진입했을 때, 필요한

                       부분만 받을 수 있다.

  prefetching : 첫화면에 링크 태그로 감싸진 path가 있다면 그 path는

                    페이지를 진입할 수 있으므로 홈에서 홈이 로드될 때 그

                    페이지에 대한 데이터들을 미리 받아온다. (a태그는 x)

 

- 페이지가 next.js app이 아니라, 그 밖의 다른 네이버 사이트나 구글이런데로 보낼꺼면 링크 의미가 없으므로 a태그로 설정( 미리 받아올 데이터가 없으므로 ) 내부에서 사용할 때는 link태그 

 

- 스타일(attribute)을 주고싶다면 (class name 같은 경우) link태그가 아닌 a태그에 써야 한다.

 

2) Assets, Metadata and CSS

- Next.js는 CSS와 Sass를 빌트인으로 서포트 한다.

2-1) image 추가하기 

index.js파일에 위에 태그를 <Main>태그 안에 추가한다. 그러면 페이지에 그림이 추가되는 것을 확인 할 수 있습니다.

그러나 screen 사이즈에 따른 이미지 크기 변화나 third party tool이나 library를 이용해서 optimizing하거나 viewport를 누를때 이미지 로딩도 Nextjs에서 제공된다.

'next/image'에서 <image>에서 여러가지 기능들을 제공한다.

img태그와 image태그 사이즈 일치 시키고 적용시켜보았다.

새로고침을 해보면 <image>태그인 이미지가 깜빡거린다. 이것은 로딩할 때에도 costom되어 있는게 있다. 해당 그림들의 속성들을 보면 image태그가 알아서 Resizing과 optimization하는 것을 확인 할 수 있다.

빌드타임에는 영향이 없다.

 

 

 

 

 

 

 

 

 

2-2) Metadata

첫페이지에 head설정 하기 - 태그 안에 title과 mata태그 설정

개발자 도구를 통해 확인하기

2-3) <style jsx> 태그

vercel에서 만든 styled-jsx라이브러리

Tailwind CSS, CSS Modules와 Sass도 제공하지만, 

styled-component와 emotion과 같은 인기있는  CSS-in-JS libraries는 아래와 같이 추가해야된다.

 

첫 번째 first-post.jsx에 import Layout from '../../components/layout' 추가

두번째 nextjs-blog에 components파일을 생성 후 layout.module.css를 아래내용을 담아 생성

세 번째 components파일안에 layout.js파일 아래와 같은 내용을 담아 생성

First Post앞에 공간이 생기는걸 확인할 수 있다.

2-4) 전역에 세팅하기 Grobal setting

첫 번째, pages에 _app.js파일을 생성하고 아래와 같은 내용을 넣는다.

또한 터미널에서 멈췃다가 다시 실행.

두 번째, nextjs-blog에 styles 폴더 생성후 global.css 파일에 아래와 같이 넣어서 생성

 

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

Back to home의 언더바가 사라지고 파란색으로 바뀌었다. 

Back to home으로 가면 this page!도 똑같이 적용되었습니다. 

아래 링크에 들어가서 나머지도 스스로 따라해보자.

https://nextjs.org/learn/basics/assets-metadata-css/polishing-layout 

Learn | Next.js

몇 군데를 수정하면 아래와 같은 결과가 나옵니다.