넥스트 (33) 썸네일형 리스트형 [NextJS] next.js 개발중 권장 사항 Next.JS 에서는 애플리케이션을 구축할 때 최고의 성능과 사용자 경험을 보장하기 위해 다음과 같은 기능을 사용하는 것을 권장하고 있다. 라우팅 및 렌더링 - Layouts: 페이지 간에 UI를 공유하고 탐색 시 일부 렌더링을 활성화하기 위해 레이아웃을 사용하기 - 컴포넌트: 클라이언트 측 탐색 및 프리페치에 컴포넌트를 사용하기 - 에러 처리: production 환경에서 catch-all 에러와 404 에러를 수용하려면 사용자 정의 에러 페이지를 만들어서 유연하게 처리하기 - 합성 패턴: 서버 및 클라이언트 컴포넌트에 대한 권장 합성 패턴을 따르고 "use client" 경계의 배치를 확인하여 불필요하게 클라이언트 측 JavaScript 번들 크기를 증가시키지 않도록 주의하자. - 동적 함수: coo.. [NextJS] 글꼴 최적화와 사용법 NextJS 에서의 글꼴 nextJS 에서는 글꼴(폰트)을 자동으로 최적화해주는 기본 글꼴을 제공한다. 보통 사용자가 직접 정의한 글꼴을 사용하는 경우에는 레이아웃 시프트가 발생할 수 있다. 즉, 사용자 정의 글꼴 브라우저에서 다운로드되어 표시되기 전 까지 기본 브라우저 글꼴로 대체되어 있다가, 사용자 정의 글꼴이 다운로드된 후에 글꼴이 적용되므로, 이 때 기본 글꼴과 다운로드 글꼴의 사이즈 차이로 인해 레이아웃이 재계산되어 반영되는 문제가 발생할 수 있다. 따라서 NextJS 에서는 이러한 레이아웃 시프트 문제를 최대한 방지하기 위해, 사용자 정의 글꼴에 대한 추가적인 네트워크의 요청이 없도록 빌드 시에 정적 자산(ex. HTML)과 함께 글꼴을 다운로드하고 함께 호스팅하여 사이트를 방문한 사용자의 입.. [next.js] 클라이언트 측에서 POST 로 정보 받을 때 서버에서 읽는 코드 보호되어 있는 글입니다. [Next.js] next-auth 를 활용하여 깃허브 소셜로그인 기능 만들기(클라이언트 API) Next-auth 란? NextAuth.js는 Next.js 애플리케이션을 위한 완전한 오픈 소스 인증 솔루션 이며, 처음부터 Next.js와 Serverless를 지원하도록 설계되어 나온 라이브러리이다. next-auth 를 사용하면, 개발자는 auth 기능을 추가하기 위한 복잡한 코드를 추가할 필요 없이 라이브러리 내부적으로 처리해주기 때문에 간편하게 auth 로그인 기능을 추가할 수 있게 해준다. Next.js 13.2 이후 부터의 next-auth 13.2 버전 이전에서는 pages/api/auth/[...nextauth].js 로 권장되는 경로에 접근하여 아래와 같이 코드를 작성한다(직접 작성하기 보다는 공식 문서에 권장 코드가 잘 나와 있으니 참고해서 작성하면 된다.). import NextA.. [next.js] 16. 컴포지션 패턴 본 내용은 next.js 공식 사이트를 한글로 번역하여 정리한 것입니다. 정보 변경, 오역 등의 문제가 있을 수 있으니 자세한 내용은 공식 사이트를 활용해주세요 Rendering: Composition Patterns | Next.js When building React applications, you will need to consider what parts of your application should be rendered on the server or the client. This page covers some recommended composition patterns when using Server and Client Components. Here's a quick summar nextjs.or.. [next.js] 15. 클라이언트 컴포넌트 :: "use client" next.js 공식문서의 영문을 한글로 번역하여 정리한 내용입니다. 버전에 따라 내용의 변동이 있을 수 있고, 번역이 정확하지 않을 수 있으니 공식 사이트를 위주로 확인해주세요. Rendering: Client Components | Next.js Using App Router Features available in /app nextjs.org 클라이언트 구성 요소 클라이언트 구성 요소는 클라이언트에서 요청 시 렌더링될 수 있는 대화형 UI를 작성하는 데 사용됩니다. Next.js에서 클라이언트 렌더링은 선택 사항이며, React가 클라이언트에서 어떤 구성 요소를 렌더링할지 명시적으로 결정해야 합니다. 이 페이지에서는 클라이언트 구성 요소가 어떻게 작동하며, 어떻게 렌더링되며, 언제 사용해야 하는지에 대.. [next.js] 14. 서버 컴포넌트 현재 포스트는 next.js 의 공식 문서를 한글로 번역하여 정리한 내용을 담고 있습니다. 공식문서를 언제든지 업데이트가 가능하므로 자세하고 정확한 내용은 공식 문서를 권장 합니다. Rendering: Server Components | Next.js Using App Router Features available in /app nextjs.org 서버 컴포넌트(Server Components) React 서버 컴포넌트는 서버에서 렌더링되고 필요한 경우 캐시될 수 있는 UI를 작성할 수 있게 해줍니다. Next.js에서는 렌더링 작업이 라우트 세그먼트로 더 나누어져 스트리밍과 부분 렌더링을 지원하며, 세 가지 다른 서버 렌더링 전략이 있습니다: - 정적 렌더링(Static Rendering) - 동적 렌.. [nextjs] 13. 폼과 변이(Form and Mutations) - 서버액션 활용 예시 폼과 변이(Form and Mutations) 폼을 사용하면 웹 애플리케이션에서 데이터를 생성하고 업데이트할 수 있습니다. Next.js는 서버 액션(Server Actions)을 사용하여 폼 제출 및 데이터 변이를 강력하게 처리할 수 있는 방법을 제공합니다. 서버 액션이 어떻게 동작하는지 서버 액션을 사용하면 API 엔드포인트를 수동으로 생성할 필요가 없습니다. 대신 컴포넌트에서 직접 호출할 수 있는 비동기 서버 함수를 정의합니다. 서버 액션은 서버 컴포넌트에서 정의하거나 클라이언트 컴포넌트에서 호출할 수 있습니다. 서버 컴포넌트에서 액션을 정의하면 JavaScript가 없어도 폼이 작동하여 점진적으로 향상됩니다. next.config.js 파일에서 Server Actions을 활성화하세요: // ne.. 이전 1 2 3 4 5 다음
