why getServerSideProps(SSR) doesn't work at vercel deploy - next.js

Question

I am trying to deploying next js instagram clone coding.
so i used the getServerSideProps for singin with google.
it works at localhost:3000 what i want.
but after deploying this web then when i click the signin then turns out server error page.
i don't know what can i do to solve this problem.
i already downgrade firbase to 9.4.0
and i used getStaticProps(?) instead of getServerSideProps..
(if i need to use useeffect instead of getServerSideProps then please show me detail code please.... i am beginner :( )
please help me out
this is signIn code:
import {getProviders, signIn as SignIntoProvider } from "next-auth/react";
import Header from "../../components/Header";
import Image from "next/future/image";
//Brower...
function signIn({providers}){
return (
<>
<Header />
<div className="flex flex-col items-center min-h-screen py-2 mt-56 text-center">
<Image className="w-80" src="/img/스쿼드 로고.png" alt="" width={400} height={200}/>
<p className="font-xs italic">
SQUARD PROJECT - By EunSeo PARK
</p>
<div className='mt-20'>
{Object.values(providers).map((provider) => (
<div key={provider.name}>
<button className="p-3 bg-blue-500 rounded-lg text-white" onClick={() => SignIntoProvider(provider.id, {callbackUrl: "/"})}>
Sign in with {provider.name}
</button>
</div>
))}
</div>
</div>
</>
);
}
//Server side
//export async function getServerSidedProps
export async function getServerSideProps() {
const providers = await getProviders();
if (!providers) {
return {
redirect: {
destination: '/',
permanent: false,
},
}
}
return {
props: {
providers,
},
};
}
export default signIn;
this is the package.json code:
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#faker-js/faker": "^7.5.0",
"#headlessui/react": "^1.7.2",
"#heroicons/react": "^1.0.6",
"#tailwindcss/forms": "^0.5.3",
"fake": "^0.2.2",
"faker": "^6.6.6",
"firebase": "^9.4.0",
"moment": "^2.29.4",
"next": "12.3.0",
"next-auth": "^4.10.3",
"next-optimized-images": "^2.6.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-moment": "^1.1.2",
"react-router-dom": "^6.4.1",
"recoil": "^0.7.5",
"tailwind-scrollbar-hide": "^1.1.7",
"typescript": "^4.8.4"
},
"devDependencies": {
"autoprefixer": "^10.4.11",
"eslint": "8.23.1",
"eslint-config-next": "12.3.0",
"postcss": "^8.4.16",
"tailwind-scrollbar": "^2.0.1",
"tailwindcss": "^3.1.8"
}
}
this is the next.config.js code:
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
const colors = require('tailwindcss/colors')
module.exports = {
images: {
domains: ['localhost', 'images.unsplash.com', 'googleusercontent.com','lh3.googleusercontent.com',
'firebasestorage.googleapis.com', 'googleapis.com','cloudflare-ipfs.com']
},
mode: 'jit',
theme: {
extend: {
colors: {
sky: colors.sky,
cyan: colors.cyan,
},
backgroundColor: ['active'],
},
},
variants: {},
plugins: [],
}