NextJs 소개 글 전부 읽어보기...
https://nextjs.org/learn/foundations/about-nextjs
Next.js와 React.js 차이점
next.js
- react의 프레임워크. 정해져 있는 것을 따르면 설정없이 사용 가능한 기능들이 있음. ex) Router 설정.
- pre-render : 컴포넌트의 초기상태를 기반으로 미리 렌더링된 html을 클라이언트로 넘김 => 페이지의 초기 로딩 지연을 줄일 수 있음!
- hydration : pre-render된 페이지에 react의 반응성을 입히는 것
HTML이 미리 보여지고 로딩이 끝나면 react.js와 연결된다.
HTMl -> 로딩 -> react.js 연결
Hydration
서버 측에서 생성된 HTML 마크업을 클라이언트 측의 인터랙티브한 리액트 컴포넌트로 변환하는 프로세스. 초기 렌더링 속도를 향상시킬 수 있다.
서버에서 렌더링된 HTML을 화면에 바로 표시하고, 클라이언트 측에서 자바스크립트를 로드한다.
Next.js에서는 자동으로 hydration 처리함. 핵심 기능 중 하나!
유저는 더 빠르게 페이지를 볼 수 있고, 검색엔진 SEO에 좋다!
react.js
- javascript의 라이브러리. 주어진 기능들이 있고 원하는 대로 만들어서 사용.
client side render를 한다.
유저의 브라우저가 자바스크립트를 가져와서 모든 UI를 만듬
일반 리액트의 경우는 html 소스코드를 보면 div 하나 뿐이다.
<div id=""root></div> 외에는 자바스크립트 코드.
그렇기에 인터넷 속도가 느린 환경에서는 브라우저가 react 기다리는게 오래걸리는 동안 화면에 나타나는게 없음.
빈 화면 -> 로딩 -> ui 보임
Next.js 폴더
📂 pages
기본은 index 파일. 이것이 바로 home이다. path가 "/"
pages 폴더에 파일을 만들면 그 파일명으로 route가 자동으로 생긴다.
about.js 파일이 있으면 /about 으로 이동 시 그 파일에서 export default 하고 있는 함수가 렌더링됨.
📂 components
Nav 같은거 담음.
import Link from "next/link";
import { useRouter } from "next/router";
export default function NavBar() {
const router = useRouter();
return (
<nav>
<Link style={{ color: router.pathname === "/" ? "red" : "black" }} href="/">
Home
</Link>
<Link style={{ color: router.pathname === "/about" ? "red" : "black" }} href="/about">
About
</Link>
</nav>
);
}Style
중요!
📂 styles에 globals.css 파일을 만들고, 📂 _app.js에서 import 가능!
module.css
파일명 뒤에 .module.css 패턴
사용시 html을 보면 클래스명을 무작위로 만들어줘서 다른 module.css의 같인 이름이 있더라도 충돌이 생기지 않는다.
클래스 네임에 적을 시 오브젝트 프로퍼티 형식으로 적음
import styles from "./NavBar.module.css";
return ...
<nav className={ styles.nav }>
// 텍스트로 적지 않는다.styled jsx
style 태그에 jsx 프롭을 사용하고 태그 안에서 {``} 안에 평범하게 css
class 이름이 기이해짐.
태그에 className을 만들어서 styled.jsx에서 css.
컴포넌트 내부로 범위가 한정된다. 다른 컴포넌트에는 영향을 안줌.
<nav>
<div className="text">text</div>
</nav>
<style jsx>{`
nav {
background-color: tomato;
}
.text {
color: yellow;
}
`}</style>전역 style과 _app.js 폴더
App component: 일종의 컴포넌트의 청사진. Next.js가 제일 먼저 확인.
생성하려면 _app.js 이름의 파일을 만들어야 한다.
2개의 prop. Component가 되고 pageProps가 된다 (정해진 것)
<style jsx global> : 페이지가 달라지면 적용이 안됨.
📂 _app.js
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
} // 각 페이지 컴포넌트 불러와서 렌더링함
// 전체 페이지에서 쓸 NavBar, global css 추가!
export default function App({ Component, pageProps }) {
return (
<>
<NavBar />
<Component {...pageProps} />
<style jsx glbal>{``}</style>
</>
)
}Custom App
Next.js는 App 컴포넌트를 사용하여 page를 초기화합니다. 이를 재정의하고 페이지 초기화를 제어할 수 있습니다. 이를 통해 다음과 같은 놀라운 일을 할 수 있습니다.
1. 페이지 변경 간에 레이아웃 유지
2. 페이지 탐색 시 state 유지
3. componentDidCatch를 사용한 Custom 에러 처리
4. 페이지에 추가 데이터 삽입
5. Global CSS 추가
기본 App을 재정의하려면 아래와 같이 ./pages/_app.js 파일을 만듭니다.
<export default function MyApp({ Component, pageProps }) {
return < Component {...pageProps} />
}Custom App (with 타입스크립트)
_app.ts가 아닌 _app.tsx파일을 만들고 아래와 같이 작성
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps){
return < Component {...pageProps} />
}파일명.module.css 파일 형태를 제외한 모든 나머지 css파일들은 _app.js에서만 import해와서 사용해야 한다. (글로벌 css간의 충돌을 피하기 위해서이다.)
