[nextjs] routing

template vs layout

layout	경로 전반에 걸쳐서 상태가 유지됨
template	라우팅을 탐색할 때 각 하위 항목에 대해 새 인스턴스를 만든다 (즉, User 입장에서 동일한 Template을 공유하는 경로사이를 왔다갔다 할 때 DOM 요소가 다시 생성된다는 것을 의미) use-case 1. 템플릿을 통한 페이지 open animation - 페이지 간 전환 시 애니메이션을 계속해서 주고 싶을 때 - layout으로 만들어 놓으면 , 최초 렌더링시에만 animation이 적용되고 끝남 2. useEffect, useState에 의존
	// src>app>text>layout.tsx // src>app>text>template.tsx "use client"; import Link from "next/link"; import React from "react"; const TestTemplate = ({ children }: { children: React.ReactNode }) => { useEffect(()=>{ console.log("최초 렌더링 한 번만 호출합니다."); }, []);   return (     <div className="m-8 p-8 bg-white">       <h1>테스트 페이지</h1>       <p>테스트 경로 하위에서의 이동을 확인해봅니다.</p>       <nav>         <ul>           <li>             <Link href="/test">테스트 페이지</Link>           </li>           <li>             <Link href="/test/1">테스트 페이지 1</Link>           </li>           <li>             <Link href="/test/2">테스트 페이지 2</Link>           </li>         </ul>       </nav>       {children}     </div>   ); }; export default TestTemplate;
	layout을 사용하는 경우 : console.log가 최초 한 번만 호출됩니다. template을 사용하는 경우 : 페이지 이동 시 마다 계속해서 호출됩니다.

 

metadata와 SEO

SEO란?
SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹사이트나 웹페이지를 검색엔진에서 더 높은 순위에 노출시키기 위한 방법입니다. 간단하게 말해서, SEO는 검색 결과에서 웹사이트가 더 위에 나타나도록 만드는 여러 기술과 전략을 말한다
ex. <img> 태그 내의 alt 속성은 SEO를 위해 상당히 중요하다

<img src="../assets/sample.jpg" />
<img src="../assets/sample.jpg" alt="sample image" />​

1.  검색 엔진에 이미지 내용 설명하기 
- alt 텍스트는 검색 엔진에 이미지의 내용과 맥락을 설명해 준다. 검색 엔진은 이미지 자체를 보지 못하므로, alt 텍스트를 통해 이미지가 무엇에 관한 것인지 이해하고, 관련 검색 쿼리에 대한 결과로 해당 이미지를 더 정확하게 랭킹할 수 있다

2. 접근성 향상
- alt 텍스트는 시각 장애가 있는 사용자가 웹사이트의 이미지 콘텐츠를 이해하는 데 도움을 준다. 이러한 접근성 개선은 검색 엔진에 의해 긍정적인 신호로 해석되어ㅡ 전반적인 사이트의 SEO 점수를 향상 시킬 수 있다

 

Config-based Metadata 활용

1. static

원하는 page.tsx 또는 layout.tsx 어디든지 아래 코드 삽입하면 적용됨

export const metadata: Metadata = {
	title: "Sparta Next App",
	description: "This is awesome Website",
}

• metadata in page.tsx : 해당 page.tsx 컴포넌트에만 적용
  • 해당 페이지만 metadata의 적용을 받는다

// src>app>page.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Sparta Next App",
  description: "This is awesome Website",
};

export default function Home() {
  return <div>안녕하세요! 내배캠 리액트.. 아니아니 넥스트입니다!</div>;
}

• metadata in layout.tsx : 해당 layout의 하위 요소에 모두 적용
  • 해당 layout의 하위 요소에 metadata 공통적용

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Sparta Next App",
  description: "This is awesome Website",
};

export default function RootLayout({

...기존코드

 

2. dynamic

dynamic route를 갖고있는 route에서 동적으로 변경되는 params를 기반으로 metadata를 변경하고 싶을 땐 generateMetadata function 이용

import React from "react";

type Props = {
  params: {
    id: string;
  };
};

export function generateMetadata({ params }: Props) {
  return {
    title: `Detail 페이지 : ${params.id}`,
    description: `Detail 페이지 : ${params.id}`,
  };
}

const TestDetailPage = ({ params }: Props) => {
  return <div>Detail 페이지 : {params.id}</div>;
};

export default TestDetailPage;

 

페이지 이동

1. Link

Next.js의 <Link> 컴포넌트는 뷰포트에 링크가 나타나는 순간(현재 보이는 부분 :사용자가 웹 페이지를 스크롤하거나 페이지를 이동하면서 해당 링크가 실제로 사용자의 화면(즉, 뷰포트 내)에 보이기 시작하는 순간 ) 해당 페이지의 코드와 데이터를 미리 가져오는 pre-fetching 기능 지원. 사용자가 링크를 클릭하기 전에 데이터를 미리 로드함으로써 사용자가 링크를 클릭했을 때 거의 즉시 페이지를 볼 수 있게 한다

2. useRouter

 

1) router.push

2) router.replace

3) router.back

4) router.reload

 

즉 

• 단순한 내비게이션: Link 조건이 필요하지 않은 경우, 코드가 간결하고 가독성 좋음, 앵커 태그를 사용하여 SEO 친화적
• 복잡한 로직이 필요한 내비게이션 : useRouter 조건에 따라 페이지 이동하거나, 이벤트 핸들러 내부에서 페이지를 이동해야 하는 경우