Nextjs로 현대적인 웹사이트 만들기 팁

Source: Dev.to

App Router 사용하기 (Next.js 13+)

Next.js 13은 App Router를 도입했으며, Pages Router보다 더 강력합니다. 주요 장점은 다음과 같습니다:

• Server Components가 기본값 – 더 빠르고 효율적

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
    </>
  );
}

Metadata API 로 SEO 최적화

Next.js는 각 페이지의 SEO를 손쉽게 관리할 수 있는 Metadata API를 제공합니다.

// app/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: '페이지 제목',
  description: 'SEO를 위한 간단한 페이지 설명',
  // openGraph, twitter 등 다른 속성도 추가 가능
};

next/image 로 이미지 최적화

next/image 컴포넌트를 사용하면 자동으로 이미지 최적화(lazy‑loading, 리사이징, 최신 포맷 적용)가 이루어집니다.

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="이미지 설명"
      width={800}
      height={600}
    />
  );
}

이미지 크기는 접근하는 디바이스에 맞게 조정하세요.

Sitemap 및 robots.txt 설정

동적으로 sitemap을 생성하려면 app/sitemap.ts 파일을 만듭니다.

// app/sitemap.ts
import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://website-kamu.com',
      lastModified: new Date(),
    },
    {
      url: 'https://website-kamu.com/about',
      lastModified: new Date(),
    },
    // 필요에 따라 다른 라우트 추가
  ];
}

robots.txt 파일은 public/robots.txt 폴더에 두고 예시와 같이 작성합니다:

User-agent: *
Allow: /
Sitemap: https://website-kamu.com/sitemap.xml

TypeScript 사용하기

TypeScript는 개발을 보다 원활하게 만들고 오류를 줄여줍니다.

// types/index.ts
export interface Project {
  id: string;
  title: string;
  description: string;
  image: string;
}

// components/ProjectCard.tsx
import { Project } from '@/types';

interface Props {
  project: Project;
}

export default function ProjectCard({ project }: Props) {
  return (
    <div className="project-card">
      <h3>{project.title}</h3>
      <p>{project.description}</p>
      {/* 프로젝트 이미지를 표시하려면 next/image 사용 */}
    </div>
  );
}

Vercel에 배포하기 (GitHub에 푸시)

Vercel은 Next.js에 특화된 최적화를 제공하므로 웹사이트 성능이 뛰어납니다.

• 레포지토리를 GitHub에 푸시합니다.
• 레포지토리를 Vercel에 연결합니다.
• Vercel은 메인 브랜치에 변경이 있을 때마다 자동으로 빌드하고 배포합니다.

✅ 장점: 높은 성능, 자동 프리뷰, 간단한 CI/CD 통합.

즐거운 코딩 되세요! 🚀