Next.js란? : 리액트 라이브러리의 프레임워크
라이브러리
단순활용이 가능한 도구들의 집합.
직접 들어서 사용하고 제어한다는 느낌이 강함.
프레임워크
소프트웨어의 특정한 문제를 해결하기위해 상호협력하는 클래스와 인터페이스의 집합.
안에 들어가서 사용한다는 느낌이 강함.
사용하는 패턴이 정해져있고 벗어날 수 없다.
Next.js의 장점 1. SSR이 가능하다.
SSR (Server-Side Rendering)
데이터를 먼저 받고 컴포넌트와 함께 한꺼번에 실행해서 hmtl을 그려냄.
브라우저-프론트-백 통신방법 -> 싱글페이지 어플리케이션 x
CSR (Client Side Rendering)
컴포넌트를 먼저 실행하고, 데이터를 나중에 받아서 넣어야할 데이터만 바꿔넣는 방법.
단점 : 검색봇(SEO)에 걸리지 않음 = 검색사이트에 노출이 안됨
웹팩만으로는 오류도 너무 많아서 그 단점을 보완하면서 웹서버랑 같이 개발한게 Next다.
그렇다고 전부 사용하지는 않고, 검색봇에 걸리고 싶은 파트만 부분적으로 사용하기도 한다.
예) 상품이 구글링이 되도록 상품페이지만 Next로 작성.
Next.js의 장점 2. 설치가 편하다.
Next.js 설치하기
$ npm init -y // package.json 생성
$ npx create-next-app 생성할폴더이름
Next.js 세팅하기
package.json 파일이 다음과 같이 설정되어있는지 확인한다.
```json
"scripts":{
"dev": "next dev -p 3001", //개발모드
"build": "next build", //build 시작
"start": "next start" //build한 파일 시작
// "lint": "next lint" // ESLint 설정을 사용하여 ESLint를 실행
}
```
Next.js 실행하기
$ npm run devnext는 실행기라서 바로 간단히 실행이 가능하다.
실행하면 .next 폴더가 생성되는데 git에 업로드하지 않도록 .gitignore에 작성해놓자.
페이지가 갱신할때마다 폴더가 새로 생성되는 본진같은거라 번거롭지 않기 위해서임.
이렇게 하면 http://localhost:3000/index 페이지가 생성된다.
( dev서버는 코드를 고칠때마다 다시 렌더링하는거라 느림. 대신 배포하면 빨라짐. )
그리고 다음 순서대로 파일들을 생성해주자.
.babelrc 생성 -> 바벨로 렌더링해줌
바벨이 모든 언어가 브라우저에서 실행되도록 통역해주는 역할을 한다.
그래서 크로스 브라우진이 편해진다. (바벨탑 일화를 생각하면 외우기 편함)
.babelrc 는 주로 하위 디렉토리나 파일에서 특정 플러그인이나 변환(규칙)을 실행할 때 적절하고,
babel.config.js 는 여러 패키지 디렉토리를 가진 프로젝트에서 규칙을 설정할 때 유용하다.
플러그인이 없을 경우는 설치해주자
{
"presets":["next/babel"],
"plugins":["babel-plugin-styled-components"],
}
// 플러그인이 없을 경우 다음을 설치
$ npm install babel-plugin-styled-components
_app.jsx 파일 생성
가장 먼저 생성되는 파일이자 페이지에 관련된 컴포넌트 상위내용을 담고있다.
페이지 레이아웃, 글로벌한 css ... 을 씀
파일들은 _document.jsx -> _app.jsx -> about.jsx 이 순서대로 실행된다.
html 레이아웃쪽은 코드가 매우 복잡하니 이해하려하지말고 복사붙여넣기해서 사용하는 법만 알아두자.
const App = ({Component, pageProps}) => {
return(
<>
반드시 실행되는 파일
<br />
<Component {...pageProps} />
</>
)
}
export default App
_document.jsx 파일 생성 (이해하지말고 복붙하기)
import Document, {
Html,
Head,
Main,
NextScript,
} from 'next/document';
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
// sheet을 사용해 정의된 모든 스타일을 수집
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
// Documents의 initial props
const initialProps = await Document.getInitialProps(ctx);
// props와 styles를 반환
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render(){
return(
<Html>
<Head>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="true"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
Next와 함께라면 너무나 쉬운 라우팅
http://localhost:3000/board/list 만들고 싶을때?
pages 디렉토리 안에 board 디렉토리 안에 list 파일을 만들자 = pages/board/list
쨔잔. 그러면 자동생성된다.
접속하는 정보에 따라서 계속해서 바뀌는 페이지를 만들고싶을때?
예) http://localhost:3000/board/view/1
pages 디렉토리 안에 board 디렉토리 안에 view 디렉토리 안에 [id].jsx 파일을 만들자
= pages/board/view/[id].jsx
받는 id값에 따라서 자동적으로 변하면서 페이지가 만들어진다.
// board/view/1
import {useRouter} from 'next/router'
//컴포넌트
//리액트에서 돌아가는 코드
const View = ({name}) => {
console.log('2')
const router = useRouter()
return(
<>
View Page <h2>{router.query.id}{props.name}</h2>
</>
)
}
//고정함수 : 코드 실행시킬때 가장먼저 실행됨
//얘로 인해 props 값이 생김
//서버에서 돌아가는 코드
export function getServerSideProps(context){
console.log('1')
console.log(context)
return{
props:{
name:'ingoo'
}
}
}
export default View'프로그래밍 > react' 카테고리의 다른 글
| Next에 Chakra 설치와 사용법 (0) | 2022.07.31 |
|---|---|
| React Redux - 기본 용어 정리, 실행 흐름, 세가지 원칙 (0) | 2022.05.20 |
| [220506] 미들웨어) redux-saga (0) | 2022.05.11 |
| [220504] 미들웨어) redux-thunk (0) | 2022.05.10 |
| [220503] redux ) handleActions, createStore (0) | 2022.05.09 |
댓글