Next.js 초기 세팅

npx create-next-app <프로젝트명>

npx create-next-app <프로젝트명> -empty

pnpm add --save-dev --save-exact prettier

npm install --save-dev --save-exact prettier

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "all",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "endOfLine": "lf",
  "arrowParens": "always",
  "plugins": ["prettier-plugin-tailwindcss"]
}

pnpm add --save-dev prettier-plugin-tailwindcss

npm install --save-dev prettier-plugin-tailwindcss

node_modules
.next
/out
/public
/dist

import type { MetadataRoute } from "next";
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/private/",
    },
    sitemap: "https://recodelog.com/sitemap.xml",
  };
}

User-agent: *
Allow: /
Disallow: /private/
Sitemap: https://recodelog.com/sitemap.xml

import type { MetadataRoute } from "next";
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://recodelog.com",
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    {
      url: "https://recodelog.com/about",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: "https://recodelog.com/blog",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.5,
    },
  ];
}

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://recodelog.com</loc>
    <lastmod>2025-02-15T00:00:00.000Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://recodelog.com/about</loc>
    <lastmod>2025-02-15T00:00:00.000Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://recodelog.com/blog</loc>
    <lastmod>2025-02-15T00:00:00.000Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

import { buttonVariants } from "@/components/ui/button";
import Link from "next/link";
import { Metadata } from "next";
 
export const metadata: Metadata = {
  title: "404 - Page Not Found",
  description: "찾으시는 페이지를 찾을 수 없습니다.",
  robots: {
    index: false, // 색인하지 않음
    follow: false, // 링크를 따라가지 않음
  },
};
 
export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-20 gap-4 bg-linear-to-br from-black via-gray-800 to-purple-900">
      <h2 className="text-3xl font-bold uppercase text-white">Not Found</h2>
      <p className="text-lg text-center text-gray-300 max-w-md">
        Oops! 찾으시는 페이지를 찾을 수 없습니다. <br />
        입력하신 URL이 정확한지 확인하거나 홈으로 돌아가세요.
      </p>
      <Link href="/" className={buttonVariants({ variant: "outline" })}>
        Home
      </Link>
    </div>
  );
}

"use client";
 
import { useEffect } from "react";
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);
 
  return (
    <div>
      <h2>에러가 발생했습니다!</h2>
      <button onClick={() => reset()}>재시도</button>
    </div>
  );
}