[NextJS] NextJS

설치

npx create-next-app@latest .
npx create-next-app@latest --ts .

✏️

 * name can no longer contain capital letters

라는 에러가 뜨면 폴더명에 " 대문자 " 가 있어서 뜨는것이므로 " 소문자 " 로 변경

 

npm run dev

실행

 

NextJS 와 React

react = library , CSR(client-side-rendering)

Nextjs = framework , SSR(server-side-rendering)

 

✏️ CSR : 클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식

     SSR : 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식

 

🔆 React에서는 Router, render 등 환경적인 것들을 직접 코드 작성해서 실행시켜줘야 한다면,

    NextJS는 규칙에 맞춰 코드만 잘 작성하면 자동으로 코드를 불러옴

 

🔆 React 처럼 자유로운 수정은 불가함

 

🔆 유저에게 보여주고 싶은것이 있으면 pages 폴더내에 파일 시작은 📌 export default function 📌으로 한다.

 

🔆 React는 오류페이지 (404 등)을 작성해야하지만 NextJS는 default 페이지가 존재함 - 수정 가능

 

🔆 NextJS에서 npm run start 는 개발 환경을 실행 하는것이 아니라 " 실 서버 "를 실행하는것이다.

 

    왜냐하면 NextJS는 서버까지 내장되어 있는 all-in-one 이기 때문이다.

 

🔆 API를 구현해서 React와 결합하면 간단하게 서버기능과 프론트엔드 기능을 사용할수있는 어플리케이션을 구축할수 있다.

장점

🔆 앱에 있는 페이지들이 미리 렌더링 됨 - 정적으로 생성

React는 유저가 보는 모든 UI를 만들어야 한다. 브라우저가 js를 가져와서 그 js가 모든 UI를 만든다. html은 비어있는 <div> 하나뿐이      다. (느린 연결에서 큰 단점이 생김- 빈 화면만 보인다 등 )

NextJs의 소스코드는 초기상태로(HTML) pre-rendering을 함 ( 느린연결에서도 HTML은 볼수있다. - API를 제외한 다른것들은 볼        수있음) 그후에 React.js가 클라이언트로 전송되었을때 react app이 실행 된다. React.js를 프론트엔드 안에서 실행하는 것을               hydration 이라 부른다.

 

🔆 NextJS는 ReactJS를 백엔드에서 동작시켜서 이 페이지를 미리 만드는데(ssr) 이게 component를 미리 렌더를하고, 렌더링이끝나면      HTML이 되고, 그 HTML을 소스코드에 넣어준다. 그럼 유저는 로딩이 되지않았을때 미리 HTML을 볼수 있다. 그래서 SEO에 좋은것.        (로딩이 되기전에 소스코드가 이미 있기 때문에)

 

✏️ 검색엔진최적화 (Search Engine Optimization) : 검색을 하면 검색엔진은 인덱싱해둔 수많은 웹 페이지 중 가장 적합한 순서대로 결과를 노출하는데 그중 자신의 웹 페이지가 더 많이 노출되도록 최적화된 컨텐츠를 만드는 것

RULES

⭐️ page 폴더내에 파일명이 url이 됨 (소문자로 작성) / 파일내에 component 이름은 중요하지 않음! ⭐️

 

🔆 함수형 컴포넌트에서 jsx 를 리턴하는 default export 함수는 함수선언문으로 정의한다.(= export default function ) 그 외 함수들은      화살표 함수를 사용한다.

 

🔆 NextJS에서는 anchor태그( < a > )를 사용하지않는다.

       ➞ React의 Link와 같음. (새로고침방지)

       ➞ next/link의 Link href를 사용

       ➞ clinet side rendering이 가능하지만 className, style 등을 넣어줄때는 < Link >< /Link> 안 a태그에서 해줘야한다.