Mac에서 Next.js의 GettingStarted 진행 (1)
4511 단어 ReactMacTypeScriptnext.js
사용한 환경은 Intel Mac + Catalina입니다.
백엔드로서는 strapi 를 사용해 갑니다.
이번에는 Getting Started 의 장을 해 나갑니다.
0. 사전 준비
Homebrew 을 사용하여 yarn 및 Node.js 설치
command
$ brew install yarn node
작업용 폴더 만들기 및 이동
command
mkdir -p ~/devel/ && cd $_
1. Getting Started를 해본다
Getting Started 페이지의 내용을 yarn 을 사용해 실행합니다. 이 때, TypeScript 를 사용하는 옵션을 지정합니다.
이번에는
next-sample-app라는 이름으로 프로젝트 만들기command
$ yarn create next-app --typescript next-sample-app
output
yarn create v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
~~~~~~~~ 中略 ~~~~~~~~
We suggest that you begin by typing:
cd next-sample-app
yarn dev
✨ Done in 11.03s.
생성된 폴더로 이동
command
$ cd $_
서버를 시작해 봅니다.
command
$ yarn dev
output
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
서버가 시작되었으므로 브라우저에서 열어보십시오.
command
$ open http://localhost:3000/
이것으로 Getting Started 페이지가 완료되었습니다.
이번에는 Manual Setup이 아니므로 홈페이지로는
pages/index.tsx가 표시된다.서버는 기동한 상태로 해 두는 것으로 하고, 이후의 작업은 다른 터미널에서 실시한다.
[조금 가는 길] 홈페이지를 변경해 본다
디폴트로 준비되어 있는 홈페이지가 아니고, 임의의 캐릭터 라인을 출력하는 형태로 변경해 본다.
Getting Started의 Manual Setup에서는
pages/index.js를 작성하고 있지만, 이번은 TypeScript로 만들고 있으므로, 파일명을 index.tsx로 하고, TypeScript판으로 재기록한 내용으로 작성한다.홈페이지인
pages/index.tsx 덮어쓰기pages/index.tsx
function HomePage() {
return <div>Welcome to Next.js!</div>;
}
export default HomePage;
브라우저에서 열어보세요
command
$ open http://localhost:3000/
홈페이지가 임의의 문자열로 변경되었습니다.
다음 번에는 Basic Features/Pages를 진행합니다.
Mac에서 Next.js의 GettingStarted를 진행해보십시오 시리즈 기사
Reference
이 문제에 관하여(Mac에서 Next.js의 GettingStarted 진행 (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tk_hamaguchi/items/5fde2017dc553f5a797e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
