NextJS
NextJS
React로 웹 애플리케이션을 구성하기엔 고려할게 많이 있다.
React
코드는 webpack과 같은 번들러를 사용하여 번들링되고 Babel과 같은 컴파일러를 사용하여 변환되어야 한다.
코드 분할과 같은 프로덕션 최적화를 수행해야 한다.
성능 및 SEO를 위해 일부 페이지를 정적으로 미리 렌더링 하는 것이 좋다.
React 앱과 데이터베이스를 연결하기 위해 서버측 코드를 작성해야 한다.
물론 기술적으로 다 고려하고 개발할 수도 있는 것들이다. 하지만, 기술적으로 높은 수준을 요구하고, 시간 비용에서 비효율적이다. 그것을 NextJS를 통해 해결할 수 있다.
아래는 NextJS가 위에 문제에 대해 제공하는 솔루션과 기본으로 제공하는 기능들이다.
Page 기반으로 라우팅 시스템을 지원
React를 쓰려면 필수적으로 react-router-dom을 통한 라우팅이 필수적이다.
next 또한 react-router-dom을 dependency하여 개발하였지만 파일 이름을 기반으로 'js', 'jsx', 'ts', 'tsx', 'pages' 라우팅 시스템을 제공한다
예를 들어 pages/about.js 과 같은 React Component가 있다면 해당 주소를 넣으면 /about 주소를 넣으면 바로 Redirect 된다.
Pre-rendering / SSG 및 SSR 지원
Pre-Rendering
기본적으로 NextJS는 모든 페이지를 미리 렌더링한다. 즉, 클라이언트 측에서 JavaScript로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성한다.
사전 렌더링을 통해 더 나은 성능과 SEO를 확보할 수 있다.
SSG (Static-Site-Generation)
NextJS를 사용하면 각 페이지를 사용할 사전 렌더링 양식을 선택할 수 있다.
대부분의 페이지에는 SSG를 사용하고 SSR이 필요한 페이지만 SSR로 구성하여 하이브리드 웹 앱을 만들 수 있다.
SSG는 성능 향상은 위한 추가 구성이 없이 CDN에서 캐시할 수 있기 때문에 SSR에 비해 성능이 유리한 면이 있다.
SSG는 사용자 요청에 앞서 페이지를 미리 렌더링할 필요가 없다면 좋은 생각은 아니다. 페이지가 변경되고, 사용자와 계속 상호작용 한다면 말이다.
SSR (Server-Side-Rendering)
이전에 포스팅한게 있으니 간단하게 넘어가겠다. SSR은 HTML 페이지는 서버에 요청에 따라 만들어진다.
getSeverSideProps를 통해 해당 페이지의 데이터를 넘겨줄 수 있다.
최적화된 프리페칭을 위한 Client-Side Routing
NextJs의 Router을 사용하면 SPA와 유사하게 페이지 간에 클라이언트 측 Routing을 수행할 수 있다.
내장 CSS 및 Sass 지원 및 CSS-in-JS 라이브러리 지원
전역으로 style 적용하기
app.js 파일에 css을 적용하게 되면 모든 페이지와 구성 요소에 적용한다.
코드는 아래와 같다.
1
2
3
4
5
import '../global.css'
function MyApp({ Component, pageProps }: AppProps) {
return (<Component {...pageProps} />)
}
node_moudles에서 css 가져오기
bootstrap과 같은 전역 stylesheet를 가져오기 위해서는 위와 똑같이 사용하면된다.
1
2
3
4
5
import 'bootstrap/dist/css/bootstrap.css'
function MyApp({ Component, pageProps }: AppProps) {
return (<Component {...pageProps} />)
}
다른 컴포넌트에서 다른 컴포넌트 CSS를 가져오고 싶으면
1
import '@reach/dialog/styles.css'
이런식으로 적용하면 된다.
Component-Level css 추가
NextJS는 파일 명명 규칙을 통해 CSS 모듈을 지원한다. [name].moudle.css
CSS 모듈은 고유한 클래스 이름을 자동으로 생성해 CSS 범위를 로컬로 지정한다. 이러면 충돌을 걱정하지 않고 다른 파일에서 동일한 CSS 클래스명을 사용할 수 있다.
사용하는 방식은 아래와 같다.
Button.module.scss
1
2
3
4
.click{
color: red;
background-color: blue;
}
component/button.js
1
2
3
4
5
6
import styles from './Button.moudle.scss'
const button = () JSX.Element => {
return(
<button className={styles.click}></button>
)
}
SASS
먼저 npm을 통해 sass를 설치해야 한다.
1
npm install sass
그리고 next.config.js파일에서 다음과 같이 Sass 컴파일러를 구성할 수 있다.
const path = require('path')
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
CSS-in-JS
이름과 같이 Javascript 안에서 CSS를 사용할 수 있다.
1
2
3
function CssInJs(){
return <p style=>안녕</p>
}
Fast Refresh
React Component에 대한 편집 사항을 바로 화면에 반영하는 기능이다. 보통 1초 안에 실행된다.
완전한 확장 가능
Next의 기존 코드를 Extension하여 사용할 수 있다.