[Next.js] Next.js Page 편집 및 생성(feat. Pages)

📀 Pages 

Next.js의 장점 중 하나인 기능이다.

Pages 밑에 파일을 생성하고 코딩하면 그 파일의 경로가 URL경로가 되서 라우팅이 편리하다(파일 시스템 라우팅)

Next.js는 파일을 저장하는 즉시 브라우저에서 페이지를 자동으로 업데이트 한다.

React Developer Tool이라는 크롬 확장 프로그램을 이용하면 보기 쉽다.

 

Next.js 개발 서버에는 Fast Refresh가 활성화 되어있어서 파일을 변경하면 브라우저의 변경 사항을 자동으로 즉시 적용하여 새로고침 할 필요가 없다. 새로고침을 일일히 할 필요가 없어서 편리하고 빠른 작업이 가능하다.

(참고) https://nextjs.org/docs/basic-features/fast-refresh

---

🧭 Next.js의 페이지

Next.js에서 페이지는 페이지 디렉토리(Pages)의 React Component 파일이다.

페이지는 파일 이름에 따라 경로와 연결된다. 

예를 들면,

• pages/index.js => '/' 즉, root가 되고 ex. (https://localhost:1111/)
• pages/user/10 => '/user/10' 의 경로가 된다. ex. (https://localhost:1111/user/10)

---

🛠️ 새 페이지 만들기

예시로 페이지 하나를 만들어보자.

pages 아래에 about 페이지를 예시로 해보겠다.

pages 아래에 about.js 파일을 만들어주고 아래와 같이 코드를 작성한다.

 

export default function About(){
	return <h1>Made by Dochi</h1>
}

공식 문서에는 이렇게 작성되어 있지만

 

const About = () => {
	return <h1>Made by Dochi</h1>
}

export default About;

이 방식이 더 익숙하다.

(나중에 PropTypes같은거 적용하거나 할 때 좀 더 수월하다.)

 

암튼 이름은 상관 없지만 export default로 내보내기를 해줘야 한다.

 

아, 참고로

import React from 'react';

이거를 할 필요는 없다.

함수형으로 작성할 때 뿐만 아니라 React.Component 클래스를 상속받아 클래스 컴포넌트로 만들 때도 마찬가지이다.

class About extends React.Component{
	...
}

 

하지만 아래와 같은 경우에는 import가 필요하다.

import { Component } from 'react';

class About extends Component{
	...
}

 

Next.js의 공동 저자인 Tim Neutkens가 말하길,

Next.js automatically adds the React import when JSX is used indeed.
However keep in mind that we do still need to import React from 'react'
when the React variable is used.

 

"Next.js는 JSX가 실제로 사용될 때 자동으로 React를 가져온다.

하지만 우리가 React Variable을 사용할 때는

여전히 import React from 'react' 가 필요하다는 것을 기억해야 한다." 라고 하였으니

아무리 필요 없다고 생각되더라도, 주의할 필요는 있을 것 같다.

(사실 난 그냥 모든 곳에 쓴다).

 

이렇게 만들고

http://localhost:1111/about 을 주소창에 입력하고 들어가 보면 

구분을 위해서 임의로 배경을 칠했다.

이렇게 뜰 것이다.

여기까지가 페이지에 대한 기본 설명이다.

다음에는 Link에 대한 글을 포스팅하겠다.