Built Twitter Like App - 12

Install toast

npm install react-hot-toast

Add Register Logic in Modal

modify file pages/_app.tsx

import type { AppProps } from 'next/app';
import { Toaster } from 'react-hot-toast';
import { SessionProvider } from 'next-auth/react';

import Layout from '../components/Layout'
import LoginModal from '../components/modals/LoginModal'
import RegisterModal from '../components/modals/RegisterModal'
import '../styles/globals.css';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <SessionProvider session={ pageProps.session }>
      <Toaster />
      <RegisterModal />
      <LoginModal />
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  )
}

modify file components/modals/registerModal.tsx

...
  const onSubmit = useCallback(async ()=> {
    try{
      setIsLoading(true);

      await axios.post('api/register', {
        email,
        password,
        username,
        name
      })

      registerModal.onClose();
    } catch(error) {
      console.log(error);
    } finally {
      setIsLoading(false);
    }

  },[registerModal, email, password, username, name]);
...

Demo

Register a user

Check mysql, the record have been created.