728x90 반응형 Next.js4 next js 13 변경사항 살펴보기 현 프로젝트에서 next js 13 버전을 사용 중이다. 공식 문서를 보며 이전 버전에서 달라진 점 or 추가된 기능을 알아보자. Project Structure 공식 문서에 명시된 프로젝트 구조. Top-level files Next.js next.config.js Configuration file for Next.js middleware.ts Next.js request middleware .env Environment variables .env.local Local environment variables .env.production Production environment variables .env.development Development environment variables .next-env... 2023. 8. 17. CRA에 Next.js 적용하기 3 - Next.js 기본 구조 - AWS Amplify 배포 관련 이슈 1. Artifact directory doesn't exist: build build란 디렉터리를 찾지 못해 발생하는 에러. next build를 실행하면 .next라는 파일에 서버/클라이언트에게 제공될 build 파일이 생성되는데... → Amplify 측에서 build 디렉터리가 없다고 판단해버린다. - 해결책 yarn build시 .next란 폴더 말고 build라는 폴더에 build 하면 해결. next.config.js 폴더에 다음을 추가해 custom할 수 있다. 2. Non-Zero Exit Code detected 에러 코드 자체는 build 파일 내 강제 exit 코드가 있어 build가 중지되어 발생한 것. but .. 2021. 5. 14. CRA에 Next.js 적용하기 2 2021.05.13 - [Frontend/React] - CRA에 Next.js 적용하기 1 CRA에 Next.js 적용하기 1 첫 단추는 언제나 중요하다. 개발 전 CTO님이 말씀하신 "SSR이 어쩌고... 검색 엔진이 어쩌고..." 그때는 별생각 없이 흘려 들었더랬다. 이제야 문제를 깨닫고 SSR을 적용시키려하는데... 여기서 문제 23life.tistory.com Next.js가 어찌 돌아가는지 대...충이나마 감을 잡았으니! CRA으로 만든 기존 앱에 이를 적용시켜보자. 1. 기본 환경 설정 이전에 썼던 글을 참고! → 설치 및 package.json 수정, pages폴더 생성까지 진행하면 된다. 2. 구조 변경하기 한번 더 짚고 넘어가자면... Next.js는 기본적으로 최상위 루트의 pages.. 2021. 5. 13. CRA에 Next.js 적용하기 1 첫 단추는 언제나 중요하다. 개발 전 CTO님이 말씀하신 "SSR이 어쩌고... 검색 엔진이 어쩌고..." 그때는 별생각 없이 흘려 들었더랬다. 이제야 문제를 깨닫고 SSR을 적용시키려하는데... 여기서 문제, 이미 프로젝트는 CRA을 바탕으로 개발이 끝난 상황! 따라서 어쩔 수 없이 기존에 작성된 코드에 Next.js를 입혀야 한다. 으악. CRA에 Next.js 적용하기 1. 필요 모듈 설치 일반적으로는 create next-app을 통해 기초 세팅을 자동으로 진행한다. 하지만 이미 CRA으로 애플리케이션을 제작한 상태이므로... 손수 설치해주자. react, react-dom, next를 add 해주면 된다. 2. 기본 환경 설정 Next.js는 pages라는 폴더를 필요로 한다! → 요 pages.. 2021. 5. 13. 이전 1 다음 728x90 반응형
