NextJs tutorial

Darcy Daeseok YU ·2022년 12월 9일
0

Pages 폴더안의 파일이름은 곧 라우터 주소로 사용된다.

ex) localhost:3000/ -> index.tsx 파일

localhost:3000/about -> about.tsx 파일

_app.tsx 파일은 라우터로 호출된 파일 또는 components와 props를 받아 리턴한다.
fragment 안에 전역 GLOBAL css 요소나 NAVBAR컴포넌트를 구현한다.

import { AppProps } from "next/app";
import NavBar from "../components/Navbar";

// 파일명은 고정이다. _app.tsx

// customized
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
      <span>Span text :: Hello as a footer</span>

      <style jsx global>{`
        span {
          color: green;
        }
      `}</style>
    </>
  );
}
profile
React, React-Native https://darcyu83.netlify.app/

0개의 댓글