Next.js #1

TaejoonPark·2022년 5월 19일

Next.js

목록 보기

6/14

코딩앙마님 유튜브 Next 강좌를 보면서 개념 정리 다시 해보자.

설치

npx create-next-app@latest --typescript

dev서버 실행

npm run dev

개발 시작

강의를 따라서 시멘틱ui를 사용해서 실험해보자.
순수하게 다 컴포넌트를 짜보면서 할 생각도 해봤지만 일단 빠르게 복습하기에는 좋다고 생각했고 만들어져있는 컴포넌트를 실무에서 사용한다고 가정하고 작업해보는 것도 좋다고 생각했다.
복습 한번하고 나서 이런 시멘틱ui같은거 보면서 내가 직접 만들어보면 굉장히 좋은 경험이 될 것 같다.
(다운로드 수를 검색해보니 25만으로 잘 만든 ui프레임워크라는 것을 알 수 있다.)

1. 설치

npm i semantic-ui-css

2. import

_app.js에 import 해준다.

_app.js에서 하는 일

페이지 전환 시 레이아웃을 유지할 수 있다.

페이지 전환 시 상태값을 유지할 수 있다.

글로벌 css를 이곳에 선언한다.

3. 컴포넌트 만들어서 _app.js에 붙이기

src/components/Footer.tsx

export default function Footer() {
  return <div>Footer</div>;
}

src/components/Top.tsx

Header로 안쓰고 Top으로 파일명을 지은 이유는 Semantic-ui에 있는 기존에 있는 Header와 겹치기 때문이다.

해당 Top 컴포넌트에서는 이미지를 사용할 것이다. 이미지는 public에 넣는다. 정적 파일들을 제공할 위치다.

next에서 제공하는 Image 컴포넌트에 사용한 경로를 보면 /img/vercel.svg 인 것을 볼 수 있다. / 즉, root가 public으로 잡힌다.
만약, pages밑에 같은 static파일이 있으면 오류가 발생한다고 한다. -> 직접 테스트해보니까 같은 경로로 같은 파일을 두었을 때 오류는 발생하지 않고 이미지가 깨진다.

import Image from 'next/image';
import { Header } from 'semantic-ui-react';

export default function Top() {
  return (
    <div>
      <Image src='/img/vercel.svg' width={60} height={20} alt='vercel logo' />
      <Header as='h1'>태준</Header>
    </div>
  );
}

pages/_app.tsx

import '../styles/globals.css';
import 'semantic-ui-css/semantic.min.css';
import Footer from '../src/components/Footer';
import Top from '../src/components/Top';

import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Top />
      <Component {...pageProps} />
      <Footer />
    </>
  );
}

export default MyApp;

결과

아래와 같이 되었다.

_document파일 알아보기

lang 속성 같은 것을 수정하려면 여기서 해야 한다.
_app.tsx 는 global.css를 불러오거나 레이아웃을 잡는데 사용했고 _document.tsx는 서버에서만 렌더링 되기 때문에 css도 사용하지 않고 onClick같은 이벤트도 동작하지 않는다. title 같은 속성을 넣을 때 _document.tsx에서 넣으면 안되고 _app.js에서 넣거나 각 페이지에서 넣어줘야 한다.

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="ko">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

title 추가하기

import type { NextPage } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

export default function Home () {
  return (
    <>
      <Head>
        <title>HOME | FESeeker</title>
      </Head>
      <h1>home page</h1>;
    </>
  );
};