Next.js

Next.js 관리노션
Next.js 템플릿

1. Next.js란?

ㄱ. Next.js

• Next.js는 React로 웹앱을 개발하는데 리엑트만으로는 힘든 많은것들의 솔루션을 제공해주는 프레임워크라고 할 수 있음
• React는 JavaScript의 라이브러리이고 SPA, CSR의 형식으로 웹, 모바일 앱을 쉽게 만들수 있게해줌
• 프레임워크란 큰 단위의 솔루션을 제공(골격을 제공해줌)
• 라이브러리란 특정한 작은문제를 해결하기위해 제공(재료를 제공해줌)해주는 솔루션임 써도되고 안써도되는(UI, 상태관리를 위해 사용하는것)
• Next.js는 Vercel에서 2016년도에 만들었음

ㄴ. 하이브리드 Web App

• Next.js를 사용하면 렌더링 방식을 SSR, CSR중 하나를 선택해서 사용하는게 아닌 SSR과 CSR 등을 혼합하여 웹페이지를 만들수 있음(페이지 별로 렌더링 방식을 다르게하거나 한 페이지에 두개의 렌더링방식을 혼합하여 사용가능하게함)

ㄷ. Web App 개발시 중요한거

• TTV, TTI의 시간을 줄여가야함(즉 화면에 보여지고 작동되는 시간을 줄여햐한다는것)
• CSR은 비어있는 HTML을 보내고 js로 한번에 받아서 사용됨 (TTV와 TTI가 한번에됨)
• SSR의 경우 정적인 HTML을 먼저받기에 TTV는 짧지만 그 후에 js 파일을 받아 작동하기에 TTI가 TTV보다 느린편

ㄹ. 어떤걸 사용할텐가

• SSG 로그인이 필요하지않고 데이터가 변경되지 않을경우
• ISR 로그인이 필요하지않고 데이터가 변경되지않지만 자주 변경되지 않을경우
• SSR 로그인이 필요하지않고 데이터가 변경되지않지만 자주 변경하는경우(변경내용을 즉각 봐야하는경우)
• CSR, SSR로그인이 필요한상태(민감한 데이터(

2. 개발환경 설정

ㄱ. npx create next

npx create-next-app@latest --experimental-app

• 터미널에 위의 코드를 입력하고 설정을 해주면 프로젝트 생성됨
• yarn.lock 파일을 새로만들어주고
• yarn install을 실행하고
• yarn dev 해주면 실행됨

3. Page 만들기

ㄱ. 폴더안에 tsx(정적 라우팅)

• app 폴더안에 page.tsx 파일만들고 주소뒤에/폴더명을 넣으면 해당 페이지로 이동함
• 이렇게 하는이유는 웹페이지상에서 내가 클릭한곳만 렌더링이 일어나게 하기위함 file베이스의 라우팅 방식임
• products안에 pants라는 제품소개페이지로 이동하려면 아래와같이 app안에 products안에 pants 폴더로 이동하면됨 http://localhost:3000/products/pants

ㄴ. yarn build & yarn start

• yarn build는 dev와 다르게 실제 배포되었을때의 상태를 알려줌!
• 파일의 이름 파일의 크기 등 확인이가능함
• ○ (Static) automatically rendered as static HTML (uses no initial props) 라고 적혀있는건 말그대로 ○ 라고 표시된건 Static으로 HTML이고 이미 서버에 만들어져있다는거고 즉 SSG로 만들어져있다 라는뜻
• yarn build하고 yarn start를 하면 배포가 된거처럼 테스트를 확인할수 있는데 dev해서 확인하는거보다 start해서 확인하면 렌더링속도가 빠르게되고
• Network에서 속도를 Slow 3G로 놓고 확인해보면 html먼저 받고 js 파일을 받는걸 확인할 수 있음!

ㄷ. 동적라우팅(Dynamic Routing) [폴더명]

• 전에는 products 폴더안에 pants라는곳을 접근할때는 /pants라고 입력하는 정적라우팅이었지만
• 동적라우팅을 하기위해서 [pants]라고 폴더명을 만들면 /아무거나 입력해도 pants 파일이 렌더링됨
• prodcts/ 뒤에 어떤걸 입력해도 그걸 params라는 이름으로 받아와서 보여줌
• 이렇게되면 소개페이지는 SSG으로 이미 만들어져있는 HTML을 불러오게되고
• pds의 경우 SSR로 만들어져서 동적으로 작동함

ㄹ. 페이지 미리 만들기?

• 페이지를 동적으로 만들지 않고 미리 만들어서 빠르게 보여주고싶다면 아래와 같이 사용하면됨
• 그럼 터미널에 보이는거처럼 ● /products/[pants] 로 표기되어있고
• ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) 로 static 하게 HTML이 만들어져있고 getStaticProps 형태로 전달이 되었다고 알려줌
• getStaticProps은 정해진함수임!! 꼭 getStaticProps로 사용해야함

ㅁ. layoutPage

• 기본구조에 있는 layout.tsx 파일은 고정되어있는 레이아웃(헤더,네브,푸터같은)이라 어느 페이지를 가도 고정되어있음
• CSS는 파일명에 module.css를 붙여서 사용
• 하위 레이아웃메인에 보이는 nav 밑에 product안에 있을때 보이는 layout을 만들려면 product 폴더안에 layout.tsx 파일을 새로만들어주고 똑같이 사용하면됨

ㅂ. 링크만들기

• React에서 사용하는 Route랑 비슷함 <Link>를 이용해서 이동함
• 배열을 map을 돌려서 여러개의 링크를 만들수 있음

ㅅ. SEO 중요 내용 - metadata

• metadata를 사용함 타입은 next에서 제공하는 Metadata을 사용
• 제품의 이름도 metadata를 이용해서 만드러주기

4. 성능개선하기

ㄱ. 서버컴포넌트

• app 폴더안에 있는 컴포넌트들은 기본적으로 서버컴포넌트인데 그걸 알수있는 방법이
• console.log("아녕")을 했을때 vs코드 터미널에는 아녕이라고 찍히지만 브라우저엔 안보이는데 그이유가 서버 컴포넌트에서 콘솔을 찍었기 때문임
  
• 서버컴포넌트에서는 브라우저 API라던지 usestate같은 상태관리할수 있는걸 사용할수 없음

ㄴ. 동작원리 분석

• yarn build하고 yarn start를 실행하고 Newworks를 키고 페이지를 리로딩하면
• 처음으로 받은 정적인 HTML을 보면 만들어둔 클라이언트 컴포넌트를 확인 할 수 있음(숫자증가)
• 즉 클라이언트 컴포넌트는 무조건 CSR이 되는게 아니라 브라우저에서 처리해야하는코드(클릭 등 )를 클라이언트 컴포넌트라고 하고 그 클라이언트 컴포넌트의 코드가 클라이언트에 보내지는게 클라이언트 컴포넌트 코드임?????
• 일단 정적인 HTML을 보내고 그뒤에 보내주는 js파일(리엑트 라이브러리 등)받아오고 하이드레이션이 발생하면 그때 리엑트 컴포넌트로 렌더링이 되고 사용자가 웹브라우저에서 클릭을하면 정상작동하는 원리임

5. Tailwindecss

• 링크
• 사용링크
• 기존에 사용하던 CSS랑 다른형태임 bg-gray-500

6. 블로그만들기

ㄱ. 기본셋업

• next.js 설치 npx create-next-app@latest --experimental-app
• tailwinde 설치

ㄴ. 기본 레이아웃 잡기

• 헤더 메인 푸터 레이아웃 잡기
• 레이아웃 CSS하기

ㄷ. 프로필 만들기

• next가 제공하는 Image 태그안에 import 해온 프로필 사진을 넣어놓음
• Image 태그안에 priority라는게 있는데 이건 이미지를 제일 먼저 로딩하게 해주는 메소드임

ㄹ. Post 카드만들기

• json 파일안에 담겨있는 데이터들을 getAllPosts라는 함수안에 불러와서 담아주고
• getFeaturedPosts함수안에 featured가 true인거만 필터로 담아줌
• getFeaturedPost를 불러와서 posts라는 변수에 담은뒤 props로 컴포넌트로 내려줌
• 내려준 컴포넌트를 map을 돌려서 여러개의 post를 만들어주고
• post 카드컴포넌트를 만들어서 분리작업을 해줌
  
• CSS까지하면 이렇게됨

ㅁ. 캐러셀 카드 만들기

캐러셀 라이브러리 링크

• yarn add react-multi-carousel
• 캐러셀 컴포넌트를 하나만들어줌
• next의경우 컴포넌트는 기본으로 서버컴포넌트이기 때문에 클릭이 되었을때 요청을 빨리 보낼수 있도록 컴포넌트만 클라이언트 컴포넌트로 바꿀수 있는데 바꾸는 방법은 "use client"라고 컴포넌트 맨위에 해주면됨!
• 그리고 라이브러리 사용법에 있는내용을 불러와서 아래에 붙여줌

ㅂ. 카테고리 만들기

• 상단의 Post를 눌렀을때 모든 포스트들을 일단 보여줌
• 그리고 카테고리를 클릭했을때 해당 카테고리인것만 골라서 보여줄거임

ㅅ. 포스트 클릭시 상세 페이지

• 포스트를 클릭했을때 해당 포스트의 상세페이지로 들어가게함
• data 폴더안에 posts 폴더안에 파일의 이름의 경로를 filePath로 변수지정해줌
• 그리고 metadata라는 변수에 모든포스트들중에 파일이름과 포스트의 path와 같은걸 찾아서 넣어줌

ㅇ. 마크다운 뷰어

• 마크다운뷰어 플러그인을 설치하면 코드가 아래와같이 보임
• 마크다운 깃헙링크
• 터미널에 설치npm install react-markdown remark-gfm
• 컴포넌트 하나 만들어두고 확인해보면 별다른게 바뀌지 않는데 그 이유는 테일윈드를 사용하면 리셋이 된다고함
• 그래서 클래스네임으로 지정을 해줘야하거나 테일윈드 플러그인을 설치하고 prose를 사용하면 리셋되지않고 기본적인 스타일링이 적용됨
  플러그인 설치링크
• yarn add -D @tailwindcss/typography로 설치해주고
• tailwind.config.js 파일안에 plugins 안에 require('@tailwindcss/typography'),를 넣어줌
• 그리고 만들어둔 markdown컴포넌트에 className을 prose로 적용하면 기본값이 적용됨
• 리엑트 아이콘 링크
• 아이콘 추가yarn add react-icons
• tailwind CSS 어렵고 불편함..
• syntax highlight 를 이용할거임 yarn add react-syntax-highlighter를이용해서 설치해주고
• import 해주면되는데 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { dark } from "react-syntax-highlighter/dist/esm/styles/prism"; 아마타입에러가 뜰텐데 그럴땐
• yarn add -D @types/react-syntax-highlighter를 설치해줌
• 그리고 만들어둔 Markdown 컴포넌트로와서import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { dark } from "react-syntax-highlighter/dist/esm/styles/prism"; 이걸 붙여넣어주면됨
• 아마 에러가 나올텐데 아래사진처럼 코드를 재배치해주고 하이라이터를 확인해보면!

ㅅ. 이전포스트 다음포스트

• post에 Index번호를 순서로 지정해서 이전포스트와 다음포스트를 볼 수 있게 해줌
• 이런식으로 이전포스트와 다음포스트를 보여줄것임
• 이렇게됨 다시한번 느끼지만 테일윈드 너무 불편함..

ㅇ. 어바웃페이지

• 간단하게 만들어봄

ㅈ. 컨택페이지

• 컨텍페이지 만드는중
• 메세지 보내는 Form 만들기
• 일단 콘솔에 찍어봄
• UI도 수정해줌
• submit 누르면 실제로 메일 보내보기
• yarn add yup nodemailer 설치해줌
• 노드메일러가 있어야 메일 을 보낼수있음
  노드메일러 링크
• yarn add -D @types/nodemailer를해서 타입을 지정해줌
• 파일을 하나만들어서 로직을 짜줌 이부분이 잘 모르겟네

ㅊ. SEO 최적화

• PNG ICO로 변환
• 변환한 파일을 favicon.ico로 이름을 바꿔서 올려줌
• 이렇게 SEO 함

ㅌ. 성능개선 및 점검

• yarn build를 통해서 확인할 수 있음
• 데이터 패칭을하여 중복된 데이터 요청을 제거하기위해 cache 함수를사용함