Next.js-14 튜토리얼 따라가기 -4 (13장~ 16장)

 

Next.js-14 튜토리얼 따라가기 -1 (1~4) 라우팅 및 기본 세팅 폰트 이미지

Next.js-14 튜토리얼 따라가기 -1

Next.js-14 튜토리얼 따라가기 -2 (5~8장)  페이지 이동  정적 및 동적 랜더링

Next.js-14 튜토리얼 따라가기 -2 (5~8장)

Next.js-14 튜토리얼 따라가기 -3 (9장~ 12장) CRUD하기

Next.js-14 튜토리얼 따라가기 -3 (9장~ 12장)

 

 

13장 Handling Error

1. 에러가 났을 때. error.tsx를 사용해 루트요소에서 에러를 잡고, 어떻게 fallback 처리하는지

2. 404로 not found 에러가 났을 때 처리하는 법을 배울 차례입니다.

 

1. 에러 처리하기

 

에러 처리하기 위해서 12장에서 작성했던 cud 에서 try catch 처리를 먼저 해야합니다.

'use server';

import { z } from 'zod';
import { sql } from '@vercel/postgres';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

const InvoiceSchema = z.object({
  id: z.string(),
  customerId: z.string(),
  amount: z.coerce.number(),
  status: z.enum(['pending', 'paid']),
  date: z.string(),
});

const CreateInvoice = InvoiceSchema.omit({ id: true, date: true });
const UpdateInvoice = InvoiceSchema.omit({ date: true, id: true });

export async function createInvoice(formData: FormData) {
  const { customerId, amount, status } = CreateInvoice.parse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });

  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];
  try {
    await sql`
      INSERT INTO invoices (customer_id, amount, status, date)
      VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
    `;
  } catch (error) {
    return {
      message: 'Database Error: Failed to Create Invoice.',
    };
  }

  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

export async function updateInvoice(id: string, formData: FormData) {
  const { customerId, amount, status } = UpdateInvoice.parse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });

  const amountInCents = amount * 100;

  try {
    await sql`
        UPDATE invoices
        SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
        WHERE id = ${id}
      `;
  } catch (error) {
    return { message: 'Database Error: Failed to Update Invoice.' };
  }

  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

export async function deleteInvoice(id: string) {
  try {
    await sql`DELETE FROM invoices WHERE id = ${id}`;
    revalidatePath('/dashboard/invoices');
    return { message: 'Deleted Invoice.' };
  } catch (error) {
    return { message: 'Database Error: Failed to Delete Invoice.' };
  }
}

 

 

하지만 에러를 아래와 같이 처리한다면, 에러가 떴을 때 페이지 진행을 할 수 없어진다. 이게  error.tsx 파일이 생긴 이유다.

 

export async function deleteInvoice(id: string) {
  throw new Error('Failed to Delete Invoice');

  try {
    await sql`DELETE FROM invoices WHERE id = ${id}`;
    revalidatePath('/dashboard/invoices');
    return { message: 'Deleted Invoice.' };
  } catch (error) {
    return { message: 'Database Error: Failed to Delete Invoice.' };
  }
}

 

 

이제 error.tsx 파일을 /dashboard/invoices 에추가해보자

'use client';
 
import { useEffect } from 'react';
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Optionally log the error to an error reporting service
    console.error(error);
  }, [error]);
 
  return (
    <main className="flex h-full flex-col items-center justify-center">
      <h2 className="text-center">Something went wrong!</h2>
      <button
        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
        onClick={
          // Attempt to recover by trying to re-render the invoices route
          () => reset()
        }
      >
        Try again
      </button>
    </main>
  );
}

이후 에러가 뜬다면 아래와 같이 보일 것이다.

 

이때 error와 reset을 위 코드에서 확인할 수 있는데

error : 자바스크립트 error객체의 instance이다.

reset : 에러 경계를 리샛시켜주는 버튼으로,  해당 루트요소를 리랜더링 시켜준다.

 

 

2. No-Found 처리하기

 

존재하지 않는 아이디로 접속하면 아래와 같은 가짜 화면을 보개 될 것이다.(값이 없는)

 

import Form from '@/app/ui/invoices/edit-form';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
import { notFound } from 'next/navigation';

export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;
  const [invoice, customers] = await Promise.all([
    fetchInvoiceById(id),
    fetchCustomers(),
  ]);

  if (!invoice) {
    notFound();
  }
  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: 'Invoices', href: '/dashboard/invoices' },
          {
            label: 'Edit Invoice',
            href: `/dashboard/invoices/${id}/edit`,
            active: true,
          },
        ]}
      />
      {invoice && <Form invoice={invoice} customers={customers} />}
    </main>
  );
}

위 코드를 추가하면 이제 페이지가 없을 때 에러가 생기기에 error.tsx가 랜더링된다.

 

이때 생긴 에러는 notfound 에러이므로 not-found.tsx를 아래와 같은 폴더 위치에 추가하면 notfound에러처리가 완료된다.

 

 

낫파운드는 error.tsx보다 우선시 랜더링된다.

 

 

 

14장 Improving Accessibility

배울내용은 아래와 같습니다

1. 넥스트에서  eslint-plugin-jsx-a11y 를 활용해 접근성 향상시키기

2. 서버사이드에서  폼 유효성 검사

3. 리엑트에서 useFormState 훅을 통해서 에러처리하고  유저한테 보여주는 법

 

 

1. 넥스트에서  eslint-plugin-jsx-a11y 를 활용해 접근성 향상시키기

접근성이란 ?? keyboard navigation, semantic HTML, images, colors, videos, etc. 등 다양하게 있는데,

모든 사람이 앱을 쓸 수 있게 디자인하고 실행하는 것을 말합니다. (https://web.dev/learn/accessibility/)

 

넥스트에서는   eslint-plugin-jsx-a11y  를 통해서 사전에 이미지에 alt가 없다던가,, 등등 경고를 해줍니다.

"scripts": {
    "build": "next build",
    "dev": "next dev",
    "seed": "node -r dotenv/config ./scripts/seed.js",
    "start": "next start",
    "lint": "next lint"
},

 

현재는 경고가 없지만, 만약 alt를 지운다면??

 

추가적으로 접근성을 향상시키는 대표적인 방법은

시멘틱 태그, 라벨링,  포커스시 경계선 표시등이 있습니다.

 

2. 서버사이드에서 폼 유효성 검사

현재 예시에서는 별다른 조건 없이 폼을 제출가능하게 했는데, 그러면 에러가 발생한다. 이때 required  어트리뷰트를 통해서, 이를 예방할 수 있습니다.

없을 경우 위와 같이 에러가 뜨지만 required가 있으면 아래와 같이 브라우저에서 제출을 막아준다.

하지만 서버에서 유효성 검사를 해야지 아래 3가지 효과를 얻을 수 있다.

1. 디비에 데이터 전송전에 형식을 예측 가능함

2. 클라이언트 사이드 유효성 검사를 무시한 유저를 대비할 수 있음

3. 유효한 정보라는 하나의 신뢰성을 얻음.

 

예제가 많고,, 가독성 차원에서 EXAMPLE 사진을 그대로 가져오겠습니다.. ( __ )

 

우선 useFormState 훅을 임포트하고,   return 값으로 state,dispatch를 가져와 줍니다. (useReducer와 비슷한 모양)

이때 2번쨰 매개변수인 초기값은 할당하고 싶은 것 할당하면 됩니다. 

예제에서는 에러시 뜰 메세지를 null로 errors를 빈 객체로 초기값을 할당했네요

이후 action의 InvoiceSchema에 에러시 나올 문구들을 추가해줍니다.

이후  createInvioce함수에  usesFormState 에서 전달하는 값을 받을 수 있게 매개변수 preState를 추가해줍니다.

export async function createInvoice(prevState: State, formData: FormData) {
  // Validate form using Zod
  const validatedFields = CreateInvoice.safeParse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });
 
  // If form validation fails, return errors early. Otherwise, continue.
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Missing Fields. Failed to Create Invoice.',
    };
  }
 
  // Prepare data for insertion into the database
  const { customerId, amount, status } = validatedFields.data;
  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];
 
  // Insert data into the database
  try {
    await sql`
      INSERT INTO invoices (customer_id, amount, status, date)
      VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
    `;
  } catch (error) {
    // If a database error occurs, return a more specific error.
    return {
      message: 'Database Error: Failed to Create Invoice.',
    };
  }
 
  // Revalidate the cache for the invoices page and redirect the user.
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

 

마지막으로 zod로 유효성검사를 한 내용에서 성공 및 실패시 결과값을 추출합니다.

<form action={dispatch}>
  <div className="rounded-md bg-gray-50 p-4 md:p-6">
    {/* Customer Name */}
    <div className="mb-4">
      <label htmlFor="customer" className="mb-2 block text-sm font-medium">
        Choose customer
      </label>
      <div className="relative">
        <select
          id="customer"
          name="customerId"
          className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
          defaultValue=""
          aria-describedby="customer-error"
        >
          <option value="" disabled>
            Select a customer
          </option>
          {customerNames.map((name) => (
            <option key={name.id} value={name.id}>
              {name.name}
            </option>
          ))}
        </select>
        <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
      </div>
      {state.errors?.customerId ? (
        <div
          id="customer-error"
          aria-live="polite"
          className="mt-2 text-sm text-red-500"
        >
          {state.errors.customerId.map((error: string) => (
            <p key={error}>{error}</p>
          ))}
        </div>
      ) : null}
    </div>
    // ...
  </div>
</form>

이후 create-form 에서 에러시 에러문구가 나오도록 조건문을 설정합니다.

 

여기서 추가된 것은 select에 aria-describedby ,  에러메시지가 뜨는 div에 id와 aria-live 입니다.

• aria-describedby="customer-error":  이 어트리뷰트를 통해서 error 메세지 컨테이너와 셀렉트간의 연관성을 설립합니다.  아이디가 customer-error라고 된  컨테이너는 이 select요소를 의미합니다.  유저가 셀렉트 박스와 상호작용할 때, 에러가 발생한다면, 스크린 리더가 이 메시지를 읽습니다.
• id="customer-error": 위에서 설정한 아이디입니다.
• aria-live="polite": The screen reader should politely notify the user when the error is updated. When the content changes (e.g. when a user corrects an error), the screen reader will announce these changes, but only when the user is idle so as not to interrupt them.

aria-live는 적용 미적용 차이를 비시각장애인은 인지하기 힘든데, 해당 태그를 설정해야지 시각장애인들이 에러가 났따는 사실을 인지할 수 있다고 하네요.

 

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

ARIA live regions - Accessibility | MDN

 

 

https://bcp0109.tistory.com/348

웹 접근성과 WAI-ARIA

동일한 aria-live

위에서부터 off, assertive, polite

 

최종적으로 제가 작성한 코드는 (예제 고객 이름만 예씨로 들어줍니다)

'use client';

import { CustomerField } from '@/app/lib/definitions';
import Link from 'next/link';
import {
  CheckIcon,
  ClockIcon,
  CurrencyDollarIcon,
  UserCircleIcon,
} from '@heroicons/react/24/outline';
import { Button } from '@/app/ui/button';
import { createInvoice } from '@/app/lib/actions';
import { useFormState } from 'react-dom';

export default function Form({ customers }: { customers: CustomerField[] }) {
  const initialState = { message: null, errors: {} };

  const [state, dispatch] = useFormState(createInvoice, initialState);

  return (
    <form action={dispatch}>
      <div
        className="rounded-md bg-gray-50 p-4 md:p-6"
        aria-describedby="invoice-error"
      >
        {/* Customer Name */}
        <div className="mb-4">
          <label htmlFor="customer" className="mb-2 block text-sm font-medium">
            Choose customer
          </label>
          <div className="relative">
            <select
              id="customer"
              name="customerId"
              className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
              defaultValue=""
              aria-describedby="customer-error"
            >
              <option value="" disabled>
                Select a customer
              </option>
              {customers.map((customer) => (
                <option key={customer.id} value={customer.id}>
                  {customer.name}
                </option>
              ))}
            </select>
            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
          </div>
          {state.errors?.customerId ? (
            <div
              id="customer-error"
              aria-live="polite"
              className="mt-2 text-sm text-red-500"
            >
              {state.errors.customerId.map((error: string) => (
                <p key={error}>{error}</p>
              ))}
            </div>
          ) : null}
        </div>

        {/* Invoice Amount */}
        <div className="mb-4">
          <label htmlFor="amount" className="mb-2 block text-sm font-medium">
            Choose an amount
          </label>
          <div className="relative mt-2 rounded-md">
            <div className="relative">
              <input
                id="amount"
                name="amount"
                type="number"
                step="0.01"
                placeholder="Enter USD amount"
                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
                aria-describedby="amount-error"
              />
              <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
            </div>
            {state.errors?.amount ? (
              <div
                id="amount-error"
                aria-live="polite"
                className="mt-2 text-sm text-red-500"
              >
                {state.errors.amount.map((error: string) => (
                  <p key={error}>{error}</p>
                ))}
              </div>
            ) : null}
          </div>
        </div>

        {/* Invoice Status */}
        <fieldset>
          <legend className="mb-2 block text-sm font-medium">
            Set the invoice status
          </legend>
          <div
            className="rounded-md border border-gray-200 bg-white px-[14px] py-3"
            aria-describedby="status-error"
          >
            <div className="flex gap-4">
              <div className="flex items-center">
                <input
                  id="pending"
                  name="status"
                  type="radio"
                  value="pending"
                  className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
                />
                <label
                  htmlFor="pending"
                  className="ml-2 flex items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300"
                >
                  Pending <ClockIcon className="h-4 w-4" />
                </label>
              </div>
              <div className="flex items-center">
                <input
                  id="paid"
                  name="status"
                  type="radio"
                  value="paid"
                  className="h-4 w-4 border-gray-300 bg-gray-100 text-gray-600 focus:ring-2 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
                />
                <label
                  htmlFor="paid"
                  className="ml-2 flex items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white dark:text-gray-300"
                >
                  Paid <CheckIcon className="h-4 w-4" />
                </label>
              </div>
            </div>
          </div>
          {state.errors?.status ? (
            <div
              id="status-error"
              aria-live="polite"
              className="mt-2 text-sm text-red-500"
            >
              {state.errors.status.map((error: string) => (
                <p key={error}>{error}</p>
              ))}
            </div>
          ) : null}
        </fieldset>
        {state.message ? (
          <div
            id="invoice-error"
            aria-live="polite"
            className="mt-2 text-sm text-red-500"
          >
            <p>{state.message}</p>
          </div>
        ) : null}
      </div>
      <div className="mt-6 flex justify-end gap-4">
        <Link
          href="/dashboard/invoices"
          className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
        >
          Cancel
        </Link>
        <Button type="submit">Create Invoice</Button>
      </div>
    </form>
  );
}

 

마찬가지로 수정도 하면 됩니다!

수정은 값 뺴고는 비울 수가 없어서 amount만  에러 처리했습니다.

 

15장 Adding Authentication

배울 내용!

1 .인증이 무엇이고 권한과 차이
2. next에서는 인증과 권한을 어떻게 다루는지  미들웨어로 유저 리다이렉트 시키는 법

3.  진행중 상태와 에러를  `useFormStatus` and `useFormState`  을 써서 관리하기

 

 

1 .인증이 무엇이고 권한과의 차이

 

인증은  시스템이 유저가 누군지 아는 것입니다.

권한은 인증 다음 단계로 해당 유저가 어디까지 접근 가능한지를 결정합니다.

 

이를 구현하기 위해 우선 로그인 페이지를 만들겠습니다.

import AcmeLogo from '@/app/ui/acme-logo';
import LoginForm from '@/app/ui/login-form';
 
export default function LoginPage() {
  return (
    <main className="flex items-center justify-center md:h-screen">
      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
        <div className="flex h-20 w-full items-end rounded-lg bg-blue-500 p-3 md:h-36">
          <div className="w-32 text-white md:w-36">
            <AcmeLogo />
          </div>
        </div>
        <LoginForm />
      </div>
    </main>
  );
}

2 . next에서는 인증과 권한을 어떻게 다루는지  미들웨어로 유저 리다이렉트 시키는 법

 

이제 NextAuth.js 를 추가해서 유저 인증을 진행할 것 입니다.

npm install next-auth@beta bcrypt

 

next-auth@beta는 14버전과 호완되는 NextAuth.js 이고 bcrypt는 유저 정보를 암호화해주는 기능을 가진 라이브러리입니다.

 

이후  .env에  시크릿키와 URL을 설정해줍니다. (아래 시크릿키는  명령어 openssl rand -base64 32 로 만든 예시입니다)

AUTH_SECRET=VqFXv3rlxMfIQBVHe2vg5AfnM/dPzeEjARj17uD7Aus=
AUTH_URL=http://localhost:3000/api/auth

 

다음으로 NextAuth의 구성을 설정해주는  auth.config.ts 파일을 root 경로에 설정해줍니다.

import type { NextAuthConfig } from 'next-auth';
 
export const authConfig = {
  pages: {
    signIn: '/login',
  },
};

페이지를 통해서 sign-in, sign-out, and error pages 경로를 설정할 수 있는데, 추가 설정을 하지 않으면 우리가 설정하지 않은 default 경로를 next.js가 설정한다.

 

이제 해당 파일을 활용해서 미들웨어를 이용한 리다이랙트를 구현할 수 있다.

 

import type { NextAuthConfig } from 'next-auth';
 
export const authConfig = {
  providers: [],
  pages: {
    signIn: '/login',
  },
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false; // Redirect unauthenticated users to login page
      } else if (isLoggedIn) {
        return Response.redirect(new URL('/dashboard', nextUrl));
      }
      return true;
    },
  },
} satisfies NextAuthConfig;

authorized 의 콜백은 요청이 Next.js 의 미들웨어를 거쳐서 페이지에 접속할 때, 해당 요청이 권한이 있는지를 확인한다.

요청이 완료되기전에 호출되며, auth와 request 프로퍼티를 객체로 받는다. auth 프로퍼티는 유저 세션을 가지고 있꼬, request 프로퍼티는 다가오는 요청을 담고 있다.

 

이제 middleware.ts 파일을 만들고 위 코드를 import 하면 된다.

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';

export default NextAuth(authConfig).auth;

export const config = {
  // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
  matcher: ['/((?!api|_next/static|_next/image|.png).*)'],
};

이제 NextAuth.js 를 authConfig 객체를 활용해서 시작했고, 미들웨어에서 matcher 옵션을 사용해서 어떤 경로에서 운영되야 할 지를 구체화 했다. 이렇게 미들웨어를 사용하면  루트가 미들웨어에 의해 검증되기 전에는 랜더링 조차 되지 않아서, 보안과 성능 모두 향상된다.

 

이제 bcrypt 로 암호화해서 보안을 향상시켜야하는데, bcrypt는 node.js API라서 next.js 의 미들웨어에서는 사용이 불가능하다. 따라서 bcrypt를 임포트할 auth.ts 파일을 만들어야 한다.

 

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
});

 

이후 next.auth의 옵션인 providers  을 추가하는데, 이는 구글이나 깃헙 같은 다른 로그인 리스트를 담는 배열인데, 

이 예제에서는 Credentials authentication만 다룬다. (일반로그인, 이메일로그인 ,OAUTH 3가지 중 일반로그인)

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [Credentials({})],
});

 

크래댄셜을 추가하고

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';
import { z } from 'zod';
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);
      },
    }),
  ],
});

내부에 이메일과 비밀번호 유효성 검사 코드를 추가한다. (zod활용)

 

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';
import { sql } from '@vercel/postgres';
import { z } from 'zod';
import type { User } from '@/app/lib/definitions';
import bcrypt from 'bcrypt';
 
async function getUser(email: string): Promise<User | undefined> {
  try {
    const user = await sql<User>`SELECT * from USERS where email=${email}`;
    return user.rows[0];
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw new Error('Failed to fetch user.');
  }
}
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);
 
        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await getUser(email);
          if (!user) return null;
        }
 
        return null;
      },
    }),
  ],
});

이후 getUser를 통해서 DB에 있는 이메일과 일치한 유저 정보를 가져온다

 

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';
import { sql } from '@vercel/postgres';
import { z } from 'zod';
import type { User } from '@/app/lib/definitions';
import bcrypt from 'bcrypt';

async function getUser(email: string): Promise<User | undefined> {
  try {
    const user = await sql<User>`SELECT * from USERS where email=${email}`;
    return user.rows[0];
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw new Error('Failed to fetch user.');
  }
}

export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);
        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await getUser(email);
          if (!user) return null;
          const passwordsMatch = await bcrypt.compare(password, user.password);

          if (passwordsMatch) return user;
        }

        console.log('Invalid credentials');
        return null;
      },
    }),
  ],
});

마지막으로 bcrypt를 통해 가져온 비밀번호를 비교한다.

이후 존재하면 user정보주고 아니면 null을 주어서 로그인 방지한다.

 

 

이후 action.ts 파일에  authenticate 라는 함수를 만들고 auth.js에 있는 signin 을 임포트한다. 이를 통해서 로그인폼에 로그인 로직을 연결 할 것이다.

 

export async function authenticate(
  prevState: string | undefined,
  formData: FormData
) {
  try {
    await signIn('credentials', Object.fromEntries(formData));
  } catch (error) {
    if ((error as Error).message.includes('CredentialsSignin')) {
      return 'CredentialSignin';
    }
    throw error;
  }
}

CredentialSiginin 이 발생하면, 이를 리턴해서 적절한 에러 메시지를 보여줄 수 있다.

끝으로 로그인 폼 컴퍼넌트에서 useFormState를 사용하여 서버액션을 일으키고 에러를 다룰 수 잇따. 그리고 useFormStatus로 전송 중 상태를 다룰 수 있다.

 

'use client';

import { lusitana } from '@/app/ui/fonts';
import {
  AtSymbolIcon,
  KeyIcon,
  ExclamationCircleIcon,
} from '@heroicons/react/24/outline';
import { ArrowRightIcon } from '@heroicons/react/20/solid';
import { Button } from './button';
import { useFormState, useFormStatus } from 'react-dom';
import { authenticate } from '@/app/lib/actions';

export default function LoginForm() {
  const [code, action] = useFormState(authenticate, undefined);

  return (
    <form action={action} className="space-y-3">
      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
        <h1 className={`${lusitana.className} mb-3 text-2xl`}>
          Please log in to continue.
        </h1>
        <div className="w-full">
          <div>
            <label
              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
              htmlFor="email"
            >
              Email
            </label>
            <div className="relative">
              <input
                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                id="email"
                type="email"
                name="email"
                placeholder="Enter your email address"
                required
              />
              <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
            </div>
          </div>
          <div className="mt-4">
            <label
              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
              htmlFor="password"
            >
              Password
            </label>
            <div className="relative">
              <input
                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                id="password"
                type="password"
                name="password"
                placeholder="Enter password"
                required
                minLength={6}
              />
              <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
            </div>
          </div>
        </div>
        <LoginButton />
        <div className="flex h-8 items-end space-x-1">
          {code === 'CredentialSignin' && (
            <>
              <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
              <p aria-live="polite" className="text-sm text-red-500">
                Invalid credentials
              </p>
            </>
          )}
        </div>
      </div>
    </form>
  );
}

function LoginButton() {
  const { pending } = useFormStatus();

  return (
    <Button className="mt-4 w-full" aria-disabled={pending}>
      Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
    </Button>
  );
}

 

 

사이드네비바의 form에도 action을 추가하여 로그아웃도 구현하면 된다.

<form
          action={async () => {
            'use server';
            await signOut();
          }}
        >
          <button className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
            <PowerIcon className="w-6" />
            <div className="hidden md:block">Sign Out</div>
          </button>
        </form>

 

16장 Adding Metadata

Metadata는  SEO 와 공유성에서 중요한 요소다. 이를 추가하는 법을 배운다.!

 

 

Metadata 란?

 

메타데이터는 화면에 보이지 않는 html에 내장된 정보다. 주로 <head> 에 있으며,  SEO나 다른 시스템들이 웹사이트 정보를 자세히 알 때 필요하다.

 

Metadata는 왜 중요한가?

Metadata는 SEO를 향상시키는데 중요한 역할을 한다.(접근 가능성과 이해력을 높인다)

적절한 메타데이터는 서치 엔진이 웹페이지를 효율적으로 찾을 수 있게 하고, 검색 결과 순위를 향상시켜준다. 추가적으로 Open Graph 같은 메타데이터는 소셜 미디어에 공유된 링크 외향을 향상시키고, 컨텐츠가 더 매력있고 유익하게 한다.

 

메타데이터의 종류

더 다양한 종류가 있지만 일반적으로 쓰는 것만 설명하겠습니다.

Title Metadata: 브라우저 텝 제목으로, SEO가 어떤 사이트인지 아는데 도움준다.

<title>Page Title</title>

Description Metadata: 간단한 내용을 요약해주면 종종 SEO의 결과로 노출된다.

<meta name="description" content="A brief description of the page content." />

Keyword Metadata: 검색 엔진이 탐색할 때 도움을 주는 키워드 들이다.

<meta name="keywords" content="keyword1, keyword2, keyword3" />

Open Graph Metadata: 소셜 미디어에 공유될 떄, 제목, 설명, 내용이다.

<meta property="og:title" content="Title Here" /><meta property="og:description" content="Description Here" /><meta property="og:image" content="image_url_here" />

Favicon Metadata: 브라우저 주소쪽에 등록되는 페비콘 이미지

<link rel="icon" href="path/to/favicon.ico" />

 

Metadata 추가하는법

메타데이터를 next에서는 두 가지 방법으로 추가 가능하다.

• Config-based: ayout.js or page.js file에서 static metadata object  또는 generateMetadata function 을 export하기 File-based: 특별한 파일명 활용
  • favicon.ico, apple-icon.jpg, and icon.jpg: Utilized for favicons and icons
  • opengraph-image.jpg and twitter-image.jpg: Employed for social media images
  • robots.txt: Provides instructions for search engine crawling
  • sitemap.xml: Offers information about the website's structure

두 가지 방법 중 어떤 걸 써도 next.js가 알아서 <head>에 추가해준다.

 

Favicon and Open Graph Image

Learn Next.js: Adding Metadata | Next.js

 

public에 있던 파일을 app으로 이동시키면 favicon과 open graph image가 등록된다. (개발자 도구로 확인할 수 있음)

 

Page title and descriptons

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

어떠한 layout.js 든 상관없이 metadata object  로 적용 가능하다.

특정 페이지에서 metadata를 다르게 하고 싶으면 해당 page.tsx에서 등록하면 된다.

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Invoices | Acme Dashboard',
};

 

부모의 메타데이터를 override하는 것을 확인할 수 있다.

 

하지만 더 좋은 방법은  title.template를 사용하는 것이다. (유지보수성 향상)

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',
    default: 'Acme Dashboard',
  },
  description: 'The official Next.js Learn Dashboard built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

 

루트 레이아웃에 이렇게 작성하고,

page.tsx 를 수정하면 위와 똑같은 title 임을 확인할 수 있다.

export const metadata: Metadata = {
  title: 'Invoices ',
};

 

이상 끝~