[TIL] Next.js #2 기본 기능들

Leesu·2023년 1월 25일

next.js

Next.js_Blog

목록 보기

6/10

오늘은 Next.js 의 기본적인 기능들에 대해 알아볼 것

SSR(Server-Side-Rendering)

SRR 은 앞서 공부한 내용을 참고하자

automatic routing

Pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅 된다!
- pages/about.tsx -> localhost:3000/about
- 예외적으로 index.tsx 는 앱이 시작하는 파일이라고 보면 된다. -> "/" 임.
파일명과 파일안의 컴포넌트 함수 명은 꼭 일치하지 않아도 된다.
컴포넌트는 꼭 export default 해주어야한다.

Link 사용하기

a 태그를 사용하면 처음 페이지에 진입시 번들 파일을 받고, a 태그에 의해 라우팅 되면 다시 번들 파일을 받기 때문에,
<Link> 태그를 사용해야한다.

// -Nav.js

export default function Home() {
	return (
    	<Link href="/" legacyBehavior >
        	<a>Home</a>
        </Link>
    	<Link href="/about" legacyBehavior >
        	<a>About</a>
        </Link>
	)
}

❗ Next 13 버전 이상부터, Link 태그 안에 a 태그를 쓰려면 legacyBehavior prop 을 꼭 추가해야한다. (참고)
이렇게하면 a 태그에 속성을 부여할 수 있다.

동적 URL - useRouter()

앱의 함수 컴포넌트에서 router 객체 내부에 접근하려면 userRouter() 훅을 사용할 수 있습니다.

// -Nav.js

export default function Home() {
	const router = useRouter(); 

	return (
    	<Link href="/" legacyBehavior >
        	<a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
        </Link>
    	<Link href="/about" legacyBehavior >
        	<a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>About</a>
        </Link>
	)
}

위와 같이 작성하면, "/" 에 있을때 Home 글자가 빨간색으로 변하고, 아닌 경우에는 파란색으로 변한다.
router 객체 내부에서 pathname 값을 가져와서 라우터에 훅을 건 것이다.

import module.css

module css 를 사용하여 스타일을 적용할 수 있다.
이렇게 작성하면, 브라우저의 HTML 에서 확인해 봤을때 클래스네임이 랜덤으로 지어진걸 볼 수 있다!!
따라서 다른 컴포넌트에서도 .nav 클래스 이름을 사용해도된다!

// -Nav.module.css

.nav {
	background-color : tomato;
}

// -Nav.js

import styles from "./Nav.module.css"

export default function Home() {
	const router = useRouter(); 

	return (
      <nav className={styles.nav}> <<<----
    	<Link href="/" legacyBehavior >
        	<a>Home</a>
        </Link>
    	<Link href="/about" legacyBehavior >
        	<a>About</a>
        </Link>
      </nav>
	)
}

한 태그에 두 개의 클래스네임을 적용하는 방법

// -Nav.js

import styles from "./Nav.module.css"

export default function Home() {
	const router = useRouter(); 

	return (
      <nav className={`${styles.nav}${styles.navtwo}`}> <<<----
    	<Link href="/" legacyBehavior >
        	<a>Home</a>
        </Link>
    	<Link href="/about" legacyBehavior >
        	<a>About</a>
        </Link>
      </nav>
	)
}

Styles JSX

style jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들수 있다.

// -Nav.js

export default function Home() {
	const router = useRouter(); 
    
	return (
      <nav>
    	<Link href="/" legacyBehavior >
        	<a>Home</a>
        </Link>
    	<Link href="/about" legacyBehavior >
        	<a>About</a>
        </Link>
        <style jsx>{`   <<<----
        	nav {
            	background-color : tomato;
            }
            a {
            	text-decoration : none;
            }
        `}</style>
      </nav>
	)
}

클래스 네임은 <nav jsx-랜덤텍스트...> 로 이루어진다.

// -Nav.js

export default function Home() {
	const router = useRouter(); 
    
	return (
      <nav>
    	<Link href="/" legacyBehavior >
        	<a className={router.pathname === "/" ? "active" : "" }>Home</a> <<<----
        </Link>
    	<Link href="/about" legacyBehavior >
        	<a>About</a>
        </Link>
        <style jsx>{`   <<<----
        	nav {
            	background-color : tomato;
            }
            a {
            	text-decoration : none;
            }
            .active {  <<<----
            	color : blue;
            }
        `}</style>
      </nav>
	)
}

위와 같이 삼항연산자에 클래스를 텍스트로 전달하고 jsx 에서 스타일을 작성해주는 것도 가능하다.

sass 사용

따로 config 파일을 정의 하지 않아도 css 파일을 scss로 바꾼 후 yarn add sass --dev를 입력하면 자동으로 설정이 가능하다.

style global JSX

<style jsx global>를 사용하면 글로벌로 스타일 정의가 가능하다.
단❗, _app.tsx 에서만 정의가 가능하다.
(다른 컴포넌트에 정의한 경우 다른 클래스와 겹쳐 오류를 발생할 수 있으므로)

// _app.tsx

import "./globals.css";

function MyApp({ Component, pageProps }) {
  return (
  	<>
    <NavBar />
    <Component ponent {...pageProps} />
    <style jsx global>{`  <<<-----
    	a {
        	color : white;
        }
    `}</style>
    </>
  )
}

위와 같이 작성해주면, 이제 모든 Link 태그들은 어디에서든지 하얀색으로 보일거당.

_app.tsx

app 이 실행되면, Next.js 는 다른 파일들보다도 제일 먼저 _app.tsx 를 실행한다.(참고)
타입스크립트를 사용할 경우 _app.tsx 아닐 경우 _app.js

// _app.tsx 일 경우

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

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

export default MyApp;

// _app.js 일 경우

function MyApp({ Component, pageProps } {
  return <Component {...pageProps} />;
}

export default MyApp;

Component, pageProps를 받는데,
- 여기서 props로 받은 Component는 요청한 페이지다.
- 만약 get /about 요청을 보냈다면 Component 에는 /pages/about.js 파일이 props로 내려오게 된다.
그럼 위와 같은 코드가 아래처럼 작동되며 about 페이지가 보이게된다.

// _app.tsx

function MyApp({ about, pageProps }) {
  return <about {...pageProps} />;
}

next/head

Next.js 에서 제공되는 기능으로, import 만 해주면 바로 사용할 수 있다.
<Head> 태그안에 <title> 태그를 사용해서 타이틀을 적어주면 바로 적용된다!

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>title</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

만약 타이틀이 앞부분만 다르고, 뒷부분은 모두 공통적으로 같은 타이틀을 가진다면,
타이틀 전용 컴포넌트를 만들어주면 편하다.

// Head title 전용 컴포넌트
// Seo.tsx

interface Iprops {
  title: string;
}

export default function Seo({ title }: Iprops) {
  return (
    <Head>
      <title>{title} | Next Movies</title>
    </Head>
  );
}

// about.tsx

import Seo from "./components/Seo";

export default function about() {
  return (
    <div>
      <Seo title="About" /> <<<----
      <h2>About ~~</h2>
    </div>
  );
}