NextJS 공부 - 2
NextJS 공부 2!!
NextJS은 Layout용으로 간단히 사용 할 수 있는 몇가지 작은 기능들을 제공합니다.
Layout
- Layout은 NextJS 자체적으로 제공되는 기능은 아니긴 합니다만, 아래와 같이 React Layout을 잡는 경우가 종종 있습니다.
- Layout 파라미터로 children을 받고, div 아래에 {children}을 입력하여 주면, Layout 내부의 자식 Element들이 자동으로 children으로 들어가게 됩니다.
// Layout.tsx file..
import { NextPage } from "next";
import NavBar from "./NavBar";
const Layout: NextPage = ({ children }) => {
return (
<div>
<NavBar />
<div>{children}</div>
<style jsx global>{`
a {
color: red;
}
`}</style>
</div>
);
};
export default Layout;
// _app.tsx file..
import type { AppProps } from "next/app";
import Layout from "../components/Layout";
import "../styles/globals.css";
// Custom App이 있는 여기에만 css import가 가능하다
function App({ Component, pageProps }: AppProps) {
return (
<div>
<Layout>
<Component {...pageProps} />
</Layout>
</div>
);
}
export default App;
Head
- nextjs 에서 제공해주는 기능으로 import 해서 사용가능합니다.
- head로 설정된 값들은 자동으로 HTML의 로 설정된다고 생각하면 됩니다.
// Title.tsx
import Head from "next/head";
interface Title {
title: string;
}
const Title = ({ title }: Title) => {
return (
<Head>
<title>{title} : Next Movies</title>
</Head>
);
};
export default Seo;
Public 폴더 접근 방법
- 간단히
/경로만 해주면 public 에도 접근이 가능합니다.
// public에 icon.png 파일이 있는 경우 아래와 같이 입력
<img src="/icon.png" />
오늘은 여기까지!!
나머지는 3부에서..
오늘도 응원합니다^^
@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 23.52%, steem power : 1907992.53, STU KRW : 1200.
@happyberrysboy staking status : 13840 KRWP
@happyberrysboy limit for KRWP voting service : 13.84 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 44.459 KRWP [60819017 - cdbb4c525881c44cadddd46bf70405ce7e2882f1]