Next.js 시작하기
Next.js를 프로젝트에 도입하면, 더이상 react와 react-dom 스크립트를 unpkg.com에서 받아 올 필요가 없다.
대신, 관련 패키지들을 npm을 통해 설치할 수 있다.
아래의 일련의 과정을 통해 Next.js를 성공적으로 프로젝트에 도입해보자.
1. Install packages
먼저, package.json이라는 빈 객체({})만 있는 파일을 만들자.
// package.json
{
}
그리고, 터미널에서 아래의 명령어를 실행시키자.
run npm install react react-dom next
설치가 완료되고 나면, package.json 파일 아래 아러처럼 dependencies들이 설치 된 것을 볼 수 있을 것이다.
// package.json
{
"dependencies": {
"next": "^12.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
You will also notice a new folder called node_modules that contains the actual files of our dependencies.
Jumping back to the index.html file, you can delete the following code:
- The react and react-dom scripts since you’ve installed them with NPM.
- The <html> and <body> tags because Next.js will create these for you.
- The code that interacts with app element and ReactDom.render() method.
- The Babel script because Next.js has a compiler that transforms JSX into valid JavaScript browsers can understand.
- The <script type="text/jsx"> tag.
- The React. part of the React.useState(0) function
After deleting the lines above, add import { useState } from "react" to the top of your file. Your code should look like this:
2. index.html 파일명 변환: html -> js/jsx
아래 코드들을 삭제함으로써 변환된 최종 코드는 아래와 같을 것이다.
<삭제될 코드>
- react, react-dom 스크립트를 가져오는 코드
- html, body 태그 삭제 : Next.js가 대신 만들어 준다.
- app 엘리먼트와 소통하는 ReactDOM.render() 메소드
- 바벨 스크립트 : Next.js는 complier(JSX -> JS)를 가지고 있다.
- 바벨 스크립트 삭제 했으므로, script태그 더이상 필요 없다 : The <script type="text/jsx"> tag.
- The React. part of the React.useState(0) function
// index.js
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export dafault function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
const [likes, setLikes] = useState(0);
function handleClick() {
setLikes(likes + 1);
}
return (
<div>
<Header title="Develop. Preview. Ship. 🚀" />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
);
}이제는 더이상 HTML 파일 형식이 아닌, js/jsx형식이므로 파일 이름 역시 index.js 혹은 index.jsx로 변환해주자.
3. package.json에 script 추가
Next.js development 서버를 구동시키기는 명령어로 "dev"를 아래처럼 설정해주자.
// package.json
{
"scripts": {
"dev": "next dev"
},
// "dependencies": {
// "next": "^11.1.0",
// "react": "^17.0.2",
// "react-dom": "^17.0.2"
// }
}4. index.js 파일 위치 이동 및 export default 시키기
이제 아래 두가지 부분만 더 처리해주자.
- index.js파일을 pages폴더 안에 위치하도록 옮겨준다.(자세한 사항은 다음 글에서 다루겠다.)
- index.js파일의 components를 export default 해준다.
- 이를 통해, Next.js가 어떤 컴포넌트를 메인 컴포넌트로 렌더해야 하는지 구분 할 수 있게 된다.
이제 npm run dev 명령어를 터미널에 치면
정상적으로 localhost:3000 서버가 띄워지는 것을 확인 할 수 있다.
Fast Refresh
위의 일련의 과정을 통해 서버를 실행 시킬 수 있었다.
이제 코드의 일부만 살짝 바꿔서 저장을 해보면, 새로고침을 하거나 다른 행동을 할 필요 없이 바로 브라우저에 반영되는 것을 볼 수 있다.
이러한 기능을 Fast Refresh라고 부르며, Next.js에서 기본적으로 제공되고 있는 기능 중 하나이다..
지금까지 React프로젝트를 Next.js 프로젝트로 변화시키면서, 표면상으로는 단순히 몇줄의 코드를 줄인 것처럼 보이겠지만,
다루기 까다롭고 세팅할 것들이 많은 barbel 스크립트를 제거하였을 뿐 아니라, FastRefresh라는 기능도 같이 경험 할 수 있었다.
다음 포스트에서는 Next.js가 실제로 어떻게 작동하는지에 대해 알아보겠다.
'NextJS' 카테고리의 다른 글
| [NextJS - 6] Rendering ( Next.js의 꽃, pre-rendering ) (0) | 2022.08.30 |
|---|---|
| [NextJS - 5] How Next.js works? (1) | 2022.08.29 |
| [NextJS - 3] React - Adding Interactivity With State (1) | 2022.08.29 |
| [NextJS - 2] React의 Core Concepts(Components, Props, State) (0) | 2022.08.29 |
| [NextJS - 1] React로 시작하기 ( JSX로 DOM 관리) (0) | 2022.08.29 |
