1. Style JSX
스타일을 꾸미는 방법
import Link from "next/link";
import { useRouter } from "next/router";
export default function NavBar() {
const router = useRouter();
return (
<nav>
<Link href="/">
<a className={router.pathname === "/" ? "active" : ""}>Home</a>
</Link>
<Link href="/about">
<a className={router.pathname === "/about" ? "active" : ""}>About</a>
</Link>
<style jsx >{`
a {
text-decoration: none;
}
.active {
color: tomato;
}
`}</style>
</nav>
);
}- 컴포넌트에 CSS를 적용시켜준다.
<style jsx global>{`
...
`}</style>- global : 모든 컴포넌트에 CSS 적용한다.
- NextJS는 하나의 큰 앱이 아니라 각각의 나누어진 페이지이기 때문에 하나의 페이지에 작성한 global CSS는 다른 페이지에 영향일 끼칠 수 없지만, 컴포넌트로 하위에 넣게 되면 적용된다. ( _app.tsx에 넣어서 전체 페이지에 적용)
2. Custom App Component ( 템플릿 커스터마이징 방법 )
2-1) pages 경로에 _app 파일 생성
NextJS는 렌더링 전에 _app을 보기 때문에 반드시 해당 이름으로 파일을 만들어주어야한다.
( _app.tsx )
import { AppProps } from "next/app";
import NavBar from "../components/NavBar";
import "../styles/globals.css";
// TypeScript는 AppProps 타입을 준다.
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<NavBar />
<Component {...pageProps} />
</>
);
}- Component : 렌더링 하길 원하는 컴포넌트
- pageProps : 렌더링하길 원하는 컴포넌트의 props
2-2) Layout 패턴
Custom App Component를 사용할 때 쓰는 layout 패턴이다.
* Source Code *
https://github.com/kangilbin/React.js/blob/master/nextjs-study/pages/_app.tsx
( Layout.tsx )
import NavBar from "./NavBar";
export default function Layout({ children }: React.PropsWithChildren) {
return (
<>
<NavBar />
<div>{ children }</div>
</>
);
}- children : ReactJS가 제공하는 prop으로 하나의 컴포넌트를 또 다른 컴포넌트 안에 넣을 때 쓸 수 있다.
( Layout 컴포넌트의 자식 prop들을 가져온다. )
( _app.tsx )
import { AppProps } from "next/app";
import "../styles/globals.css";
import Layout from "./../components/Layout";
export default function App({ Component, pageProps }: AppProps) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}- _app파일에는 global로 import 받아야 하는 것들이 많고, 파일 자체에 많은 코드를 원하지 않기 때문에 <Layout /> 컴포넌트 안에 <Component />를 작성한다.
3. SEO (검색 엔진) 최적화
네이버나 구글 같은 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 보이게 하기 위한 과정.
검색 엔진이 내 사이트 내용물(meta tag나 html 등)을 훑어가고 내용물에 특정한 인덱스 같은 것을 만들어 검색 결과에 보여준다. 검색 엔진 최적화는 검색엔진이 내 사이트를 크롤링할 때 정보를 더 잘 가져갈 수 있도록 도와주는 과정이기도 하다.
* Source Code *
https://github.com/kangilbin/React.js/blob/master/nextjs-study/components/Seo.tsx
3-1) Head 컴포넌트 생성
( Seo.tsx)
import Head from "next/head";
interface IProps {
title: string;
}
export default function Seo({ title }: IProps) {
return (
<Head>
<title>{`${title} | Next Movies`}</title>
</Head>
);
}
3-2) SEO(검색 엔진) 적용
import Seo from "./../components/Seo";
export default function Home() {
return (
<div>
<Seo title="Home" />
<h1>Home</h1>
</div>
);
}
반응형
'React' 카테고리의 다른 글
| [NextJS] .evn(환경 변수) 사용 방법 (0) | 2022.10.18 |
|---|---|
| [NextJS] redirect, rewrites, getServerSideProps을 사용한 URL 마스킹 방법 (0) | 2022.10.17 |
| [NextJS] Route, Routing, Dynamic Routes 사용 방법 (0) | 2022.10.13 |
| [NextJS] 프로젝트 생성 및 실행 방법 (0) | 2022.10.12 |
| [NextJS] Pre-Rendering, Client-Side-Rendering, Server-Side-Rendering 개념 (0) | 2022.10.11 |