nextjs13 Next.js로 SNS x.com 클론코딩하기 - 15 Next 배포 모드 기존 페이지 라우터의 넥스트의 배포 모드에는 총 3가지의 모드가 있었다고 합니다. 앱 라우터에선 2가지 모드로 줄었다고 합니다. Static Mode Deploying: Static Exports | Next.js Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server. nextjs.org next.config.js 파일 안에 아래와 같이 output 속성을 export 로 지정해줍니다. /** @type {import('next').NextConfig} */ const nextCo.. 2024. 2. 22. Next.js로 SNS x.com 클론코딩하기 - 14 Next 의 캐시 https://nextjs.org/docs/app/building-your-application/caching Building Your Application: Caching | Next.js An overview of caching mechanisms in Next.js. nextjs.org 공식문서 참고 넥스트13 이후의 앱 라우터부턴 서버 컴포넌트가 도입되기도 하면서, 상대적으로 프론트 서버에 부하가 많이 늘게 되었다고 합니다. 그리고 넥스트 자체에서도 성능 개선과 비용 절감을 위해 많은 정보를 캐싱하는 것이 디폴트라고 해요. 위의 문서 내용은 이러한 캐싱에 대한 메커니즘에 대해 알 수 있으니 읽어보시는 것을 추천드립니다. 이 방식들은 프론트엔드의 최적화와 관련 있기 때문에 개발이 .. 2024. 2. 20. Next.js로 SNS x.com 클론코딩하기 - 13 메타데이터 https://nextjs.org/docs/app/building-your-application/optimizing/metadata#merging Optimizing: Metadata | Next.js Use the Metadata API to define metadata in any layout or page. nextjs.org 각 page.jsx / page.tsx 에서 export const metadata 를 통해 메타데이터를 직접 입력해줄 수 있습니다. 물론 layout 파일 또한 동일한 방법으로 메타데이터를 지정해줄 수 있으나 layout 과 page 동일 계층이라면 page 내용의 메타데이터로 보여지게 됩니다. export const metadata = { title: "홈 / .. 2024. 2. 19. Next.js redirects 설정 샘플 데이터를 작성하다가 redirects 설정이 필요한 페이지를 발견했고, 해당 페이지를 굳이 use client 를 써서 useRouter 훅을 써야하나 싶은 마음에 검색했다가 알게 되었다. 그리고 무엇보다 페이지딴에 클라이언트 컴포넌트라니 뭔가 찝찝한... https://nextjs.org/docs/app/api-reference/next-config-js/redirects#header-cookie-and-query-matching next.config.js Options: redirects | Next.js Add redirects to your Next.js app. nextjs.org 해당 공식 문서에 따르면 next.cofig.js 파일 안 모듈 안에 비동기로 redirects 함수를 아래처.. 2024. 2. 17. 이전 1 2 3 4 다음
