Next.js를 사용하는 이유
- 빠른 로딩: 서버 사이드 렌더링과 정적 사이트 생성을 통해 페이지 로딩 속도를 개선합니다.
- 쉬운 페이지 라우팅: 파일 기반 라우팅으로 페이지를 쉽게 추가할 수 있습니다.
- 자동 코드 분할: 필요한 코드만 로드하여 성능을 향상시킵니다.
- API 라우트: 별도의 백엔드 없이 API를 쉽게 구축할 수 있습니다.
- 개발자 친화적: 개발 중에 빠른 피드백을 제공합니다.
- 강력한 커뮤니티 지원: 많은 개발자와 리소스가 있어 문제 해결이 쉽습니다.
Next.js의 장점
- 프리렌더링
- vercel로 서버 호스팅
- 파일 시스템 기반 라우팅
Next.js 셋팅
1. vscode 설치(Lts 적힌거 설치)
https://code.visualstudio.com/
2. node.js 설치
프로젝트 설치
vscode 터미널 열어서 next.js 프로젝트 생성할 폴더에서 명령어 입력
npx create-next-app . //. 는 현재 열려있는 폴더라는 의미
아래와 같이 어떤거 설치할지 물어보는데 사용하고 싶은 패키지를 설치하면된다
app router: 최근에 나온 기능인 리액트 서버 컴퍼넌트를 사용해서 페이지를 만들수 있는데 기존 pages router 사용 할거면 no 선택(설치하는거에 따라 폴더 구조가 달라짐)
프로젝트 설치 끝!!!
빌드하기
1. 소스코드를 실행할 수 있는 형태로 변환
2. npm run build 명령어로 빌드
3. .next/ 폴더에 파일이 생성됨
실행하기
1. 반드시 빌드 후에 실행 가능
2. npm run start (npm start)
npm run dev
개발 모드에서 실행되는거라 코드를 수정해도 실시간으로 수정됨
npm run start (npm start)
실제로 사이트를 운영할 때 사용 (웹사이트 배포)
간단한 프로젝트를 만들거기 때문에
npm run dev로 실행할 것이다
로컬호스트 주소를 ctrl + 마우스 클릭하면 개발할 웹 사이트가 열린다.
필요없는 코드 지우기
- pages/index.js
아래 코드 제외한 나머지는 다 지워도됨
export default function Home() {
return <>안녕</>;
}
- pages/api
api 폴더는 간단한 back-end에서 사용할 폴더임
(지금은 사용하지 않을거기 때문에 지움)
- public 폴더는 이미지 모아논 폴더
- styles 폴더는 css를 모아논 폴더
- pages/ _document.js
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="ko"> //en -> ko로 변경
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
css 적용 방법
기존에 사용하던 방식하고 같지만 next.js는 _app.js에서만 css 파일을 import 할 수 있음
각 컴포넌트 별로 import 하려면 module.css, module.scss 그리고 styled-component 등등 가능하다.
module.css(scss도 같다)
component.module.css 파일
.class {
width: 100%;
height: 100%;
}
Component.jsx 파일
import styles from './component.module.css'; //이름은 변경 가능합니다
function Component() {
return <div className={styles.class}>Hello World</div>;
}
styled-component
StyledButton.js 파일
import styled from 'styled-components';
const StyledButton = styled.button`
background-color: blue;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
&:hover {
background-color: darkblue;
}
`;
export default StyledButton;
//////////////////////////////
App.js 파일
import StyledButton from './StyledButton';
function App() {
return (
<div>
<StyledButton>Click Me</StyledButton>
</div>
);
}
export default App;
글로벌 css 적용방법
styles 폴더안에서 global.css 만들고
pages폴더에 _app.js 에 global.css import 하면됨
import "../styles/global.css";
import "@/styles/global.css";
// @는 프로젝트 최상위 폴더 기준으로 경로 사용(현재폴더 경로와 상관없이 사용 가능)
//둘 다 사용 가능
App 과 Document
● App컴포넌트(_app.js)
모든 페이지에 공통으로 적용하고 싶을 때 사용(header, Container 등 )
공통 컴포넌트 적용하면 다른 파일에 적용한 공통컴포넌트 지워준다
export default function App({ Component, pageProps }) {
return (
<>
<Header /> /// 모든페이지 공통으로 사용할 컴포넌트
<Container page>
<Component {...pageProps} />
</Container>
</>
);
}
● Document컴포넌트(_document.js)
html 뼈대 수정용이고 코드는 리액트 코드지만 useState, useEffect 등 과 같은 리액트 기능을 사용 못함
( HTML, Head, Body 태그와 같은 전체 페이지 구조를 정의하는 데 사용)
1. Main 컴포넌트: 애플리케이션의 실제 페이지 내용을 렌더링
2. NextScript 컴포넌트: Next.js 서버에서 생성한 페이지와 관련된
모든 JavaScript 스크립트를 브라우저에 로드
'Next.js' 카테고리의 다른 글
| [next.js] useContext(다크모드) (0) | 2023.12.04 |
|---|---|
| [next.js] 리다이렉트(redirects), 커스텀 404 페이지 (0) | 2023.12.04 |
| [next.js] useRouter hook (0) | 2023.12.01 |
| [next.js]Link 컴포넌트 (0) | 2023.11.30 |
| [next.js]라우팅(Routing) (0) | 2023.11.30 |
댓글