혼자 적어보는 노트

[Next.js] 세팅 / pages / Link / layout component 본문

NextJS

[Next.js] 세팅 / pages / Link / layout component

jinist 2022. 3. 1. 01:50

 

데이터베이스 관련 상태관리에 대한 강의를 찾던 중

next.js를 접하게되어 해당 내용을 정리해보려 한다.

 

✅ 준비사항

 

 수동 설치방법

 

1. 폴더 생성 후 npm init 으로 세팅

 

2. 생성된 package.json의 script부분의 test를 dev로 변경

“dev”:”next”

( npm run dev를 해보면 서버주소가 나오며 해당 local주소로 들어가면

적용된 것을 확인할 수 있다.)

 

3. next, react, react-dom 설치

npm i next react react-dom

 

 

📂 pages 폴더 생성

 

react에서 경로설정을 하려면 router를 사용했어야했는데

next는 pages 폴더로 경로 설정이 손쉽게 가능하다.

* 폴더 명이 pages여야 next가 인식 가능

 

1. pages 폴더 생성 후 pages폴더 안에

component들을 만들어 준다.

 

[index.js]

const Home = () => {
  return <div>Home</div>;
};

export default Home;

 

[profile.js]

const Profile = () => {
  return <div>Profile</div>;
};

export default Profile;

 

/ => index.js

/profile => profile.js

 

신기하게도 아무 설정도 해주지 않았는데 next에서 pages를 인식하고

해당 파일명에 맞는 경로로 들어갈 경우 페이지를 보여준다.

 

pages 내부에 폴더 생성도 가능하다.

이렇게 폴더 안에 파일을 생성해주면

http://localhost:3000/list/product 이 경로에서 해당 컴포넌트 확인이 가능하다.

 

 

📎 Link

 

react에서는 react-router-dom을 이용하여 link설정을 해주었지만

next에는 route기능이 기본적으로 제공된다.

 

import Link from "next/link";
<Link href="/">
  <a>Homd</a>
</Link>
<Link href="/profile">
  <a>Profile</a>
</Link>

 

Link에 href="경로" 를 입력하고 내부에 <a>태그를 추가하여 사용하는 형식이다.

 

 

📂 공통 적용 파일 불러오기

 

개별 컴포넌트에 css를 적용하려면 해당 컴포넌트 상단에 CSS파일을 import해오겠지만,

전체 컴포넌트에 적용하려는 css는 아래와 같이 적용할 수 있다.

 

pages폴더 안에 _app.js파일 생성

 

[_app.js]

import PropTypes from "prop-types";
import "적용하려는 CSS";

const App = ({ Component }) => {
  return <Component />;
};

App.prototype = {
  Component: PropTypes.elementType.isRequired,
};

export default App;

 

 

 

🙌 Head 설정하기

 

head부분을 설정하려면 next에서 제공하는 Head를 사용하면 된다.

 

[_app.js]

import Head from "next/head";

const App = ({ Component }) => {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <title>Next</title>
      </Head>
      <Component />
    </>
  );
};

위 처럼 최상위인 _app.js에 선언 할 수 있고,

특정 페이지의 title을 변경하려면 해당 페이지의 component에 Head를 선언하여 변경해주면 된다.

 

 

✍️ 레이아웃 만들기

 

공통적으로 들어갈 내용들은 _app.js 에서 만들지만

특정 컴포넌트들만 묶어서 레이아웃을 만들고 싶다면?

 

component 폴더를 추가하고 해당 폴더에

레이아웃이 될 컴포넌트를 추가한다.

 

*폴더 명과 컴포넌트 명은 무관

 

[AppLayout.js]

import PropTypes from "prop-types";

const AppLayout = ({ children }) => {
  return (
    <div>
      <div> 공통적으로 들어갈 내용(예: 메뉴) </div>
      {children}
    </div>
  );
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;

 

[레이아웃을 적용할 컴포넌트]

import AppLayout from "../components/AppLayout";

const Home = () => {
  return (
    <div>
      <AppLayout>
        <div> Hi</div>
      </AppLayout>
    </div>
  );
};

export default Home;

 

 

 

'NextJS' 카테고리의 다른 글

[Next.js] Link와 href  (0) 2022.07.29
[Node.js] 로그인 구현하기 / Express, MySQL  (0) 2022.03.19
[Node.js] nodemon 사용 해보기 / nodemon 안될 때  (0) 2022.03.17
[Node.js] Route 분리하기  (0) 2022.03.15
[Node.js] express 사용하기  (0) 2022.03.15
'NextJS' Related Articles more
Comments