nest js와 react로 웹앱을 만들어 aws amplify를 이용해 배포하려고 하는데요. 이런 오류가 발생해서 deploy를 실패하고 있습니다. 제 SSR 코드는 이렇습니다.제가 완전 초보라 SIGNIN 페이지와 소스폴더 깃헙 링크를 첨부합니다. 제발 도와주세요.https://github.com/arty0928/SNS-Community-Instagramimport {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(); return { props: { providers, }, }; } export default signIn; [WARNING]: Error occurred prerendering page "/auth/signin". Read more: https://nextjs.org/docs/messages/prerender-error Error: Error for page /auth/signin: pages with `getServerSideProps` can not be exported. See more info here: https://nextjs.org/docs/messages/gssp-export at /codebuild/output/src687705454/src/SNS-Community-Instagram/node_modules/next/dist/export/worker.js:218:27 at async Span.traceAsyncFn (/codebuild/output/src687705454/src/SNS-Community-Instagram/node_modules/next/dist/trace/trace.js:79:20)

이런 경고가뜨는데 왜 뜨는걸까요? RootStoreProvider 쪽에서 문제가 되는것같아서 찾아봤는데 RootStoreProvider에서 경고가 뜨는데 저게 찾아보니 스택오버플로에 hooks 쓸때 16버전 부터는 useEffect() 로 감싸라는것같은데 서버사이드렌더링은 클라이언트에서 화면그리기전에 먼저 store 세팅하는거라 어떻게 해야될까요?

여기있는 예제를 보고 next 에서 mobx 사용중인데  https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18 깃헙코드: https://github.com/ivandotv/mobx-nextjs-root-store 참고로 저 예제에선 rootStore를 각 store 마다 생성자에 넘겨주긴했지만 직접적으로 rootStore를 사용하지 않았습니다. 그러나 제가 사용하는 서비스는 A store B store가 있을때 B store에서 action이 발생했을때 A store 에대한 상태가 바뀌어야되서 rootStore를 생성자로 받아야될것같더라고요 이 예제를 참고했습니다. 저기서 store 만들떄 RootStore 만들고 Counter Store에   CountStore 에 this 를 넘겨줘서  이렇게 rootStore 를 받고있는데 mobx devtools 보니까 makeObservable 에 root 를 넣지도 않았는데 devtools 에서 countStore 안에 RootStore가 있고  그 RootStore 안에 countSotre가 있고 1. 이렇게 재귀처럼 state 가 존재하는데 성능에 영향을 미칠까요? 2. 특정 변수만 observe 하고싶지 않은데 어떻게 하는게 좋을까요? 전 makeobservable 에 observable을 설정안해주면 안될줄 알았는데 devtools를 보니 rootStore가 있어서요. devTools에 있는 이유가 아마 annotation 에서 observable를 세팅해주는건 observable한 값이 변경됬을때 observer() 를 감싼 컴포넌트에서 리렌더링 하기위해 있는것같더라고요 2-1. 제 개인적으로 이 문제를  해결해보고자  이런식으로 넣긴 했거든요 makeObservable 의 첫번째 인자가 target 인데 감지할 state 를 넣는것같더라고요 두번째 인자에는 annotation (action인지 observable인지)붙혀주는것같아서  첫번째 인자에서  this 는 클래스를 가르키니까, root 도 같이 traget 된것같아 this에 대한 값을 바꾸면 될것같아서  state 변수를만들고 const state = this; 를 하면  참조되는 문제때문에 {...this} 이런식으로 복사해주고 root를 undefined 해주고 makeObservable에 this 대신 state 변수를 넘기니  rootStore가 devtools에 안나오는데 이렇게 해도 되는건가요?    

11:37 에 getStaticProps 가 이벤트페이지 같은거에 적합하다 하셨는데  getStaticProps 라는게 npm build 를 하거나 npm run dev 를해서 서버를 키면  getStaticProps가 html 을 정적으로 만드는것까지 이해가 가는데 만약 이벤트 페이지를 변경하거나 삭제하고싶을때  이벤트 정보가 담긴 DB 는 삭제 또는 수정해도 이미 html 로 만들어놔서 그대로 보여주고 서버를 껏다 켜야지만 삭제 또는 수정한 내용이 적용되는건가요?

mobx react next 로 하고 있는데 runInAction 에서 비동기처리를 하려면 어떻게 해야되나요?   Component.tsx const store = useIndexStore(); useEffect(() => { const fetchData = async () => { await store.loadNewMemberData(); console.log(store.newMember) } fetchData(); }, []) 일단 훅스 컴포넌트에서 useEffect에서 store 에 저장된 정보를 불러와야되는데 Promise 기때문에 따로 함수를 만들어줘서 호출을 했고요. useEffect 뜯어보니 함수 리턴타입이 void|Destructor(?) 라 Promise 타입을 못받아서 저렇게 만들었습니다. 1. useEffect 에서 비동기 작업을 할때 저렇게 async 함수 만들어서 호출해야되는건가요? 2. async 함수를 만들었으면 꼭 await 으로 호출안해도 되는건가요? store.ts class IndexStore { root; repository rtrMenu: MenuItem[] = []// constructor(root: RootStore, repository: BaseRepository) { this.root = root this.repository = repository makeAutoObservable(this) } loadRealtimeRequestData = async (): Promise<void> => { runInAction(() => { this.rtrMenu =this.repository.getRealTimeRequestItem() }); } } store에선 loadRealtimeRequestData() 함수에서 네트워크 요청한 결과를 받습니다. await this.repository.... 여기가 await axios.get() 이런 역할을 하게 되는데  then 을 하면 쉽게 해결될문제지만 async awiat 으로 runInAction 안에서 처리할려면 어떻게 해야되나요?    

안녕하세요 노드버드 강의를 듣고 혼자 next 프로젝트를 만들고 있는데요  항상 changes에 엄청나게 많은 caches 및 static의 파일들도 수정이 되고 있습니다 왜 그런지 궁금하며 어떻게 없앨 수 있는건지 궁금합니다  패키지의 스크립트는 아래와 같습니다  "scripts": { "dev": "next dev", "build": "next build", "start": "next start" },

지금 nest cors 설정했는데도, axios에서 에러가 나는것 같네여.. 혹시 같은 문제 경험해보신 분 있으면 공유 부탁드립니다~  

리덕스에서 관리되는 데이터는 props로 넘기는 대신 redux 접근해서 바로 가져와도 성능적인면에서 크게 상관없나요? 컴포넌트끼리 props 넘기는 과정이 귀찮고 나중에 코드볼때 어떤 데이터가 넘어가야되는지 확인해야되서 리덕스로 웬만한건 다 처리하려고하는데 상관없나요?

일반 데스크탑화면일때 뷰량 모바일일때 뷰량 헤더부분(네비게이션) 을 다르게 구성해서 모바일로 가면 화면을 다른걸로 보여줘야되는데 어떻게 해야되나요?

만약 모든 페이지에서 사용자 정보가 SSR되어야한다면 getServerSideProps보다 getInitalProps로 _app에다가 설정하는게 나을꺼 같은데 혹시 이 방법 말고 더 좋은 방법이 있을까 여쭤봅니다. getInitalProps는 레거시 코드니까 사용하지 않는 게 좋다는데 이거 말고 대안을 못 찾겠네요.ㅠㅠ   1. _app -> getInitalProps MyApp.getInitialProps = wrapper.getInitialAppProps( (store) => async ({ Component, ctx }) => { store.dispatch( setCredentials({ user: await axios .get("http://localhost:4000/users/me", { withCredentials: true, headers: { cookie: ctx.req?.headers.cookie || "", }, }) .then((response) => response.data) .catch(() => null), }) ); return { pageProps: { ...(Component.getInitialProps ? await Component.getInitialProps({ ...ctx, store }) : {}), pathname: ctx.pathname, }, }; } );   2. pages -> getServerSideProps wrapper.getServerSideProps((store) => async (context) => { store.dispatch( setCredentials({ user: await axios .get("http://localhost:4000/users/me", { withCredentials: true, headers: { cookie: context.req.headers.cookie || "", }, }) .then((response) => response.data) .catch(() => null), }) ); return {props: {}}; });  

같은 자바스크립트여도 리액트인걸 개발자한테 알려주기위해 jsx 를 쓴다고 무료강좌에서 들었던것 같은데 next js 는 확장자를 보통 js로 하나요?

웹툰 앱이 정말 멋지게 개편되었 던데.. 그러다 보니 많이 바쁘시겠지요 넥스트 강의를 만들어 주시기는 ㅠ.ㅠ

이 강의를 보고 다른 프로젝트에 next redux wrapper를 적용하여 리덕스 스토어를 구성하였는데 꼭 필요한지 왜 필요한지 조금 궁금해져서 질문올립니다 답변 부탁드립니다 ㅠㅠ

로그인 폼에 ButtonWrapper, FormWrapper에 styled-components를 사용해서 마진 또는 패딩을 줬는데  페이지를 이탈 하거나 새로고침을 하면 styled-components가 적용이 안되는 문제가 있습니다. * 적용될 때 사진 * 적용 안될 때 사진

안녕하세요 따라서 만들고 있는데 이렇게 옆에 남는 부분이 생깁니다 ㅠㅠ html이라고 뜨면서 width를 100%로 채우고 최소 width를 저 html이상으로 높여봐도 오른쪽은 채워지는데 왼쪽과 위가 안채워집니다ㅠㅠ 어떠케 해야 없어질까요?

개인 토이 프로젝트를 하나 하고 있는데요,  혹시 next.js에서 도메인 라우팅 하는 방법이 있나요? 문제가 뭐냐면 제가 만든 토이 프로젝트가 있는데  http://www.hubfoodlink.com 으로 접속해서 해당 정보를 클릭하면 리엑트 컴포넌트 모달창이 띄워지는데,  http://hubfoodlink.com 으로 접속하면 접속은 되는데 정보 클릭 시 리엑트 컴포넌트 모달창이 안뜨고 An unexpected error has occurred. 라고 떠서 문제가 발생되네요 ㅠ  아니면 http://hubfoodlink.com 접속시 www을 붙여서 http://www.hubfoodlink.com접속이 되게 하는 방법이 있을까요? 물론 강의와 관련없는 질문이긴한데 몇일간 찾아보고 고민해봐도 해결되지 않아서 염치불구하고  질문을 올려봅니다.   죄송합니다 ㅠ

next의 장점중 하나가 코드스플리팅을 자동으로 해주는 거라고 알고있는데 react를 쓰신이유는 프로젝트 취지가 ssr 할 필요가 없어서 인가요??  그리고 궁금한게 cna로 프로젝트 세팅을할때 ssr할 목적없이 코드스플리팅과 폴더구조를 잡아준다는 이유로 쓰기엔 비효율적인가요? next를 사용하면 꼭 ssr을 사용해야되는지 궁금합니다