// loading.js
export default function Loading() {
  return <h4>Loading...</h4>;
}

error.js;

('use client');

export default function Error({ error, reset }) {
  return (
    <div>
      <h4>Error 페이지 예시</h4>
      <button
        onClick={() => {
          reset();
        }}
      >
        다시시도
      </button>
    </div>
  );
}

not - found.js;

export default function NotFound() {
  return <h4>404 에러페이지</h4>;
}

import { notFound } from 'next/navigation';

export default async function Detail(props) {
  const db = (await connectDB).db('forum');
  let result = await db
    .collection('post')
    .findOne({ _id: new ObjectId(props.params.id) });

  if (result == null) {
    return notFound();
  } else {
    return 상세페이지;
  }
}

// 기존html요소
<div>요소1<div>

// 내가 하드코딩해서 추가한 요소
<div className='red'>요소1 <span>제목</span><div>

// 내보내고
export default Comment;

// 불러오고
import Comment from './Comment';

fetch('/api/comment/new', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    comment,
    postId,
  }),
});

// 1
fetch('/url', {
  method: 'POST',
  body: '띠용',
});

// 2
fetch('/url', {
  method: 'POST',
  body: JSON.stringify({
    comment: '안녕하세요',
    postId: '1',
  }),
});

// 서버에서 실행한 코드 출력
console.log(req.body); // '띠용'

// 서버에서 실행한 코드 출력
console.log(req.body); // {'comment':'안녕하세요','postId':'1'}

fetch('/api/comment/new', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    comment,
    postId,
  }),
});

// /app/register/page.js;

export default function Register() {
  return (
    <div>
      <form method='POST' action='/api/auth/signup'>
        <input name='name' type='text' placeholder='이름' />
        <input name='email' type='text' placeholder='이메일' />
        <input name='password' type='password' placeholder='비번' />
        <button type='submit'>id/pw 가입요청</button>
      </form>
    </div>
  );
}

npm install bcrypt

// /pages/api/auth/signup.js;

import { connectDB } from '@/util/database';
import bcrypt from 'bcrypt';

export default async function handler(요청, 응답) {
  if (요청.method === 'POST') {
    const hash = await bcrypt.hash(요청.body.password, 10);
    요청.body.password = hash;

    let db = (await connectDB).db('forum');
    await db.collection('user_cred').insertOne(요청.body);
    응답.status(200).json('성공');
  }
}

import { connectDB } from '@/util/database';
import { MongoDBAdapter } from '@next-auth/mongodb-adapter';
import NextAuth from 'next-auth';
import GithubProvider from 'next-auth/providers/github';

// 여기서부터 새롭게 추가했음
import CredentialsProvider from 'next-auth/providers/credentials';
import bcrypt from 'bcrypt';

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: 'Github에서 발급받은 ID',
      clientSecret: 'Github에서 발급받은 Secret',
    }),

    // 이부분부터  추가
    CredentialsProvider({
      //1. 로그인페이지 폼 자동생성해주는 코드
      name: 'credentials',
      credentials: {
        email: { label: 'email', type: 'text' },
        password: { label: 'password', type: 'password' },
      },

      //2. 로그인요청시 실행되는코드
      //직접 DB에서 아이디,비번 비교하고
      //아이디,비번 맞으면 return 결과, 틀리면 return null 해야함
      async authorize(credentials) {
        let db = (await connectDB).db('forum');
        let user = await db
          .collection('user_cred')
          .findOne({ email: credentials.email });
        if (!user) {
          console.log('해당 이메일은 없음');
          return null;
        }
        const pwcheck = await bcrypt.compare(
          credentials.password,
          user.password
        );
        if (!pwcheck) {
          console.log('비번틀림');
          return null;
        }
        return user;
      },
    }),
  ],

  //3. jwt 써놔야 잘됩니다 + jwt 만료일설정
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, //30일
  },

  callbacks: {
    //4. jwt 만들 때 실행되는 코드
    //user변수는 DB의 유저정보담겨있고 token.user에 뭐 저장하면 jwt에 들어갑니다.
    jwt: async ({ token, user }) => {
      if (user) {
        token.user = {};
        token.user.name = user.name;
        token.user.email = user.email;
      }
      return token;
    },
    //5. 유저 세션이 조회될 때 마다 실행되는 코드
    // 컴포넌트 안에서 보여줄 유저 정보, 토큰에있는 유저들을 컴포넌트 안에서 보여준다고 생각하면됨
    session: async ({ session, token }) => {
      session.user = token.user;
      return session;
    },
  },

  adapter: MongoDBAdapter(connectDB),
  secret: 'qwer1234',
};
export default NextAuth(authOptions);

npm install @next-auth/mongodb-adapter

import { connectDB } from "@/util/database"; //추가
import { MongoDBAdapter } from "@next-auth/mongodb-adapter"; // 추가

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: 'Github에서발급받은ID',
      clientSecret: 'Github에서발급받은Secret',
    }),
  ],
  secret : '어쩌구'
  adapter : MongoDBAdapter(connectDB), //추가함
};

export default NextAuth(authOptions);

// connectDB
import { MongoClient } from 'mongodb';

const url = 'db주소입력';
const options = { useNewUrlParser: true };
let connectDB;

if (process.env.NODE_ENV === 'development') {
  if (!global._mongo) {
    global._mongo = new MongoClient(url, options).connect();
  }
  connectDB = global._mongo;
} else {
  connectDB = new MongoClient(url, options).connect();
}
export { connectDB };