Next.js로 시작하기(Getting Started with Next.js)
Next.js로 프로젝트를 시작하려면 더 이상 unpkg.com에서 react와 react-dom 스크립트를 로드할 필요가 없습니다. 대신, Node Package Manager (npm)를 사용하여 이러한 패키지를 로컬로 설치할 수 있습니다.
참고: 머신에 Node.js가 설치되어 있어야 합니다 (최소 버전 요구사항). Node.js는 여기에서 다운로드할 수 있습니다.
그러기 위해서는 빈 객체 {}를 가진 package.json이라는 새 파일을 생성하세요.
// package.json
{
}터미널에서 npm install react react-dom next 명령을 실행하세요. 설치가 완료되면 package.json 파일 내에 프로젝트 종속성이 나열되어 있는지 확인할 수 있어야 합니다.
// package.json
{
"dependencies": {
"next": "^12.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}우리의 종속성들의 실제 파일들을 포함하는 node_modules라는 새로운 폴더를 찾을 수 있습니다.
index.html 파일로 돌아와서 다음 코드를 삭제할 수 있습니다.
- NPM으로 이미 설치했으므로
react와react-dom스크립트를 삭제합니다. - Next.js가 이를 대신 생성할 것이므로
<html>및<body>태그를 삭제합니다. app요소와ReactDom.render()메서드와 상호작용하는 코드를 삭제합니다.- Next.js에는 JSX를 브라우저가 이해할 수 있는 유효한 JavaScript로 변환해주는 컴파일러가 있으므로
Babel스크립트를 삭제합니다. <script type="text/jsx">태그를 삭제합니다.React.useState(0)함수의React.부분을 삭제합니다.
위의 코드를 삭제한 후, 파일 상단에 import { useState } from "react"를 추가하세요. 코드는 다음과 같아야 합니다:
// index.html
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
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 파일에 남아 있는 코드는 JSX이므로 파일 형식을 .html에서 .js 또는 .jsx로 변경할 수 있습니다.
이제 Next.js 앱으로 완전히 전환하기 위해 해야 할 작업이 세 가지 더 있습니다:
index.js파일을pages라는 새 폴더로 이동시킵니다. (이에 대한 자세한 내용은 이후에 다룰 것입니다.)- 주요 React 컴포넌트에 default export를 추가하여 Next.js가 이 페이지의 주요 컴포넌트로 어떤 컴포넌트를 렌더링해야 하는지 구분할 수 있도록 합니다.
// ...
export default function HomePage() {
// ...- 개발 중에 Next.js 개발 서버를 실행하기 위해
package.json파일에 스크립트를 추가하세요.
// package.json
{
"scripts": {
"dev": "next dev"
},
// "dependencies": {
// "next": "^11.1.0",
// "react": "^17.0.2",
// "react-dom": "^17.0.2"
// }
}개발 서버 실행하기(Running the development server)
모든 것이 정상적으로 작동하는지 확인하기 위해 터미널에서 npm run dev를 실행하고 브라우저에서 localhost:3000으로 이동하여 앱을 확인할 수 있습니다. 그런 다음 코드에 작은 변경을 가하고 저장하세요.
파일을 저장하면 브라우저가 자동으로 변경 내용을 업데이트하는 것을 알 수 있을 것입니다.
이 기능은 Fast Refresh라고 불리며, Next.js에서 사전 구성되어 있는 즉각적인 피드백을 제공합니다.
요약하자면, 코드가 아래에서
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById("app")
function Header({ title }) {
return <h1>{title ? title : "Default title"}</h1>
}
function HomePage() {
const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
const [likes, setLikes] = React.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>
)
}
ReactDOM.render(<HomePage />, app)
</script>
</body>
</html>아래와 같이 바뀌었습니다.
import { useState } from 'react';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export default 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>
);
}표면적으로는 코드 줄 수가 줄어든 작은 변화처럼 보일 수 있지만, 이는 무언가를 강조하는 데 도움이 됩니다: React는 현대적인 인터랙티브 UI를 구축하기 위한 필수 기본 요소를 제공하는 라이브러리입니다. 그러나 여전히 그 UI를 애플리케이션으로 결합하는 작업이 필요합니다.
마이그레이션을 살펴보면, 이미 Next.js 사용의 이점에 대한 감각을 갖고 있을 수 있습니다. Babel 스크립트를 제거하여 복잡한 툴링 구성에 대해 더 이상 생각할 필요가 없다는 미리 맛볼 수 있었습니다. 또한 Fast Refresh가 작동하는 것을 보았는데, 이는 Next.js에서 기대할 수 있는 많은 개발자 경험 기능 중 하나입니다.
출처: https://nextjs.org/learn/foundations/from-react-to-nextjs/getting-started-with-nextjs
