묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
AWS 배포 시 getServerSideProps 오류 (Next js)
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)
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. getServerSideProps와 axios관련해서 질문드립니다.
안녕하세요. nextjs에 typescript를 붙여서 연습중인데요. getServerSideProps 함수에서 axois.defaults.headers.Cookie = ""; 설정을 해주는 것이사용자간의 쿠키가 겹치는것을 방지하는 것이라고 이해를 했는데요. Property 'Cookies' does not exist on type 'HeadersDefaults'. 경고가 발생 하고 있습니다. 그래서 구글링 해보니 axios.defaults.headers.common.Cookies를 사용하라는 내용이 있는데 이게 맞는건가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 getServerSideProps 에 대해 여쭤봅니다.
질좋은 강의 감사합니다. 언제나 도움이 되는 거 같네요. 강의 내에선 getServerSideProps을 대부분 쓸 것이고, getStaticProps, getStaticPath를 쓸 일은 정말 현저히 적을 것이라고 말씀하셨는데요. (저도 next를 사용해보면서 그렇게 느꼈구요.) 최근 공지사항에서 'getServerSideProps를 최소화하시는 게 좋습니다. 이를 위해서는 유저 정보를 SSR하지 마시고 CSR해야 합니다. getStaticProps나 getStaticPath를 써야 서버쪽에서 컴포넌트 캐싱이 가능합니다. 유저 정보는 개인마다 다 다르기때문에 캐싱이 불가능하거든요. 다음 리뉴얼 때는 getStaticPath와 getStaticProps만 써서 Incremental Rendering을 보여드릴까 생각 중입니다.' 라고 하셔서 조금 혼란이 옵니다 ㅠㅠ... Incremental Rendering을 검색하면 뭔가 방법이 나올까하고 구글링해봤는데 큰 소득을 얻지 못해서 구체적으로 어떤 방식으로 코드를 써야 할 지 갈피가 잡히지 않아 질문드립니다. 모든 페이지를 // export async function getStaticPaths() { // const await = axios.get('/post...') // return { // paths: [ // { params: { id: '1' } }, // { params: { id: '2' } }, // { params: { id: '3' } }, // { params: { id: '4' } }, // ], // fallback: true, // }; // } 이런식으로 바꾸어야 좋은 건가요? SSR를 최소한으로 한다면 next를 쓰는 의미가 없을 거 같은데 생각할수록 답을 알 수 없어지는 느낌입니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
질문드립니다 getServerSideProps or getInitialProps
만약 모든 페이지에서 사용자 정보가 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: {}}; });
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Next link 서버사이드렌더링 질문
안녕하세요! 강의를 응용해서 블로그를 만들어보고 있는데요! <a href="/">Home</a> <Link href="/" ><a>Home<a/></Link> a태그를 이용해 이동 할 경우, 아래 getServerSideProps가 잘 작동하여, 데이터가 채워지는데, Link를 이용해 이동 할 경우 데이터가 채워지지 않습니다. export const getServerSideProps = wrapper.getServerSideProps(async (context) => { const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } context.store.dispatch({ type: LOAD_MY_INFO_REQUEST, }) context.store.dispatch({ type: LOAD_POSTS_REQUEST, }); context.store.dispatch(END); await context.store.sagaTask.toPromise(); }); 새로고침이 되지 않으면 데이터가 채워지지 않는 것 같은데, 몇일 간 관련 자료를 찾아보아도 이런 경우가 없는 것 같아 질문드립니다..
-
미해결
Next getServerSideProps context.params에 favicon이 왜.. 때문일까요..?
브라우저 창 주소 - localhost:3000/nickname 컴포넌트 내부 import { useRouter } from 'next/router'; const MyPost = () => { const router = useRouter(); const { pagename } = router.query; console.log(pagename); // 결과 - nickname 정확히 출력 }; getServerSideProps 내부 export const getServerSideProps = wrapper.getServerSideProps(async (context) => { console.log(context.params); // 결과 - { pagename : 'favicon.ico' } ?? }); useRouter의 query와 context의 params가 같은 역할을 하는걸로 배웠는데... getServerSideProps에서 왠 'favicon.ico'가 ?? 출력이 되는걸까요...? 당황쓰...