Next.js (1) - 시작,link 연결

joker·2020년 3월 23일
0

NEXT.js

목록 보기
2/4

Next.js 시작하기

Next.js는 Windows, Mac 및 Linux에서 모두 작동합니다. Next.js 애플리케이션 구축을 시작하려면 시스템에 Node.js 만 설치하면됩니다.

또한 코드를 작성하려면 텍스트 편집기와 일부 명령을 호출하려면 터미널 응용 프로그램이 있어야합니다.

Windows를 사용하는 경우 PowerShell 또는 Git Bash ( git 와 함께 제공 )를 사용해보십시오 . Next.js는 모든 셸 또는 터미널에서 작동하지만이 가이드에서는 일부 UNIX 관련 명령을 사용합니다. 쉽게 따라 할 수 있도록 PowerShell을 사용하는 것이 좋습니다.

프로젝트 작성하기

시작하려면 다음 명령을 실행하여 샘플 프로젝트를 작성하십시오.

mkdir은 폴더를 생성하며, cd는 해당 directory로 이동하는 명령어 입니다.
hello-next 폴더를 만들고 hello-next 경로로 이동하여 npm을 설치합니다. 그리고 hello-next폴더 안에 pages라는 폴더를 만들어주세요.

mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

이후 package.json 파일 안에 "scripts"를 변경하여 주세요

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

모든준비가 끝났으니 아래 명령어로 dev(서버개발환경) 서버를 시작해주세요.

npm run dev

이후 http://localhost:3000 으로 접속하여 주세요.
아래 문구가 나오면 성공 입니다.

404 - This page could not be found

Hello World 출력하기

pages/index.js에 아래와 같은 코드를 작성해 보세요. 이후 localhost:3000을 새로고침하면 Hello Next.js 문구가 출력될 것입니다.

여기에서는 pages/index.js모듈 에서 간단한 React Component를 내보냈습니다 . 마찬가지로 자체 React 컴포넌트를 작성하여 내보낼 수 있습니다.

export default function Index() {
  return (
    <div>
      <p>Hello Next.js</p>
    </div>
  );
}

오류 처리
기본적으로 Next.js는 이와 같은 오류를 추적하여 브라우저에 표시합니다. 이를 통해 오류를 식별하고 신속하게 수정할 수 있습니다.
문제를 해결하면 전체 페이지를 다시로드하지 않고도 페이지가 즉시 나타납니다. 기본적으로 Next.js에서 지원되는 Webpack의 핫 모듈 교체 기능을 사용하여이 작업을 수행합니다.

pages/about.js에 아래와 같은 코드를 작성해보세요.

export default function About() {
  return (
    <div>
     <p>This is the about page</p>
    </div>
  );
}

이후 http://localhost:3000/about 으로 접속시 해당 페이지를 확인 할 수 있습니다.
이 페이지를 pages/index.js 와 연결해 보도록 하겠습니다.
pages/index.js에 아래와 같은 코드를 작성해보세요

import Link from "next/link";

export default function Index() {
	return (
		<div>
			<Link href="/about">
				<a title="About Page">About Page</a>
			</Link>
			<p>Hello Next.js</p>
		</div>
	);
}

이후 http://localhost:3000 접속후 About page 클릭시 해당 페이지로 이동되는것을 확인할 수 있습니다.

클라이언트 측 히스토리 지원
뒤로 단추를 누르면 클라이언트를 통해 페이지를 색인 페이지로 탐색합니다. 당신을 위해 next/link모든 location.history처리를 수행합니다.
한 줄의 클라이언트 측 라우팅 코드조차 작성할 필요가 없습니다.
단순히 페이지를 연결하십시오. 그냥 작동합니다!

링크는 단지 래퍼 구성 요소이며, 단순하지만 강력합니다
props를 추가해야하는 경우 props를 하위에 추가해야합니다. 이 경우 Link구성 요소 의 자식은 앵커 태그입니다.

profile
개발자입니다.

0개의 댓글