2021. 8. 3. 00:11ㆍ개발/Next.js
Next.js 를 한번 해보라는 지인의 소개에 한번 찾아보니 create-react-app 후 Express와 연결해줄 필요없이 한번에 routing까지 쉽게 할 수 있다는 것을 알게되었다.
Web Framework을 한번 시도해보려고 할때마다 느끼는 것이지만, 공식홈페이지가 다른 Tech에 비해 월등히 잘되어있음을 느낄 수 있었다.
Next.js 공식홈페이지 : https://nextjs.org/
Next.js by Vercel - The React Framework
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
nextjs.org
1. Pre-Condition (준비물)
- Node.js (10.13 또는 그 이후 버전)
- Atom 같은 editor 툴
2. create Next.js sample app
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"--example 옵션은 github에 있는 template을 사용하게 해준다.
3. Run Dev Server
cd nextjs-blog
npm run dev기본적으로 React.js 또는 Express에서 주로 사용하는 PORT 3000 을 사용하게 된다.
위와 같이 building, compiling 과정을 거쳐 compile에 성공하게 되면, PORT 3000 을 통해 서버를 실행시키게 된다.
그리고 localhost:3000을 들어가보면 아래와 같이 Default Page 가 나타나게 된다~!
4. Modify File
Server 를 끄지 말고, 프로젝트 경로의 'page/index.js' 를 들어가서 아래의 "Welcome" 부분을 "Learn" 으로 바꿔주고, 저장을 하면 자동으로 compile하고, 브라우저에서도 auto reloading이 된다.
import Head from 'next/head';
export default function Home() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1 className="title">
<!-- 이 부분 -->
Welcome <a href="https://nextjs.org">Next.js!</a>
</h1>
(중략)
)
}
Next.js 공식홈페이지에서는 Fast Refresh라고 부르고 있다. Dev Server에서는 파일이 바뀌는 것을 감지하여 빠르게 확인할 수 있는 기능을 제공해준다.
The Next.js development server has Fast Refresh enabled. When you make changes to files, Next.js automatically applies the changes in the browser almost instantly. No refresh needed! This will help you iterate on your app quickly.
서버를 끄고 싶다면 CMD창에서 Ctrl + C 를 눌러주면 된다.
'개발 > Next.js' 카테고리의 다른 글
| [Next.js] 3. Assets, Metadata, and CSS (0) | 2021.08.10 |
|---|---|
| [Next.js] 2. Navigate Between Pages (0) | 2021.08.04 |