next.js
-
구글 애널리틱스 (GA4) for developersReact.js, Next.js 2023. 7. 16. 21:44
Prerequisitestypescriptnextgoogle analytics default configgoogle analytics debuggerReferencesUnlock the Power of Google Analytics 4 in Just 5 Minutes with Next.js and TypeScript (2023 Edition) Unlock the Power of Google Analytics 4 in Just 5 Minutes with Next.js and TypeScript (2023 Edition)If you own a website, you know how important it is to track its performance and make data-driven decisions..
-
Next.js - 다양한 SNS 플랫폼에 대응할 수 있는 SEO 도입하기React.js, Next.js 2022. 10. 21. 21:12
현재 상황 제일 상위 (public) 디렉토리 Head 에 걸어놓은 대표 meta 태그로 인해, 특정 SNS에서 설정한 description이 노출되지 않은 상황입니다. 디스코드 / 슬랙 디스코드와 슬랙 모두 트위터 태그의 영향을 받습니다. 하지만 디스코드의 경우에는 하위 페이지에 대한 메터태그가 노출되지 않는 상황이고, 슬랙은 노출되는 상황입니다. 카카오톡, 인스타그램, 페이스 북의 경우에는 모두 의도대로 노출되고 있으나 한국 외에 사용하고 있는 SNS에 대한 SEO도 신경 써야 하기 때문에 Next.js 프레임워크 도입부터는 이전과 다른 방향으로 적용할 예정입니다. 플랫폼마다 적용되어 미리보기로 보이는 메터 태그의 정보가 다양하기 때문에 모든 플랫폼에서 원하는 미리보기를 만들 수는 없습니다. 하지만,..
-
Next.js - middleware 사용하기 (기본편)React.js, Next.js 2022. 9. 25. 21:37
Advanced Features: Middleware | Next.js Advanced Features: Middleware | Next.js Learn how to use Middleware to run code before a request is completed. nextjs.org nested-middleware | Next.js nested-middleware | Next.js Nested Middleware You are defining a Middleware file in a location different from /middleware , which is not allowed. While in beta, a Middleware file under specific pages would on..
-
Next.js - CSR, Client side data fetchingReact.js, Next.js 2022. 9. 18. 20:43
Data Fetching: Client side | Next.js Data Fetching: Client side | Next.js Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more. nextjs.org Client-side 데이터 패칭은 SEO 인덱싱이 필요 없는 페이지에서 유용합니다. 해당 상황의 경우에는 너의 data를 pre-render 할 필요도 없고, 페이지가 빈번히 업데이트되야 할 것입니다. 서버-사이드 렌더링 API 들과 다르..
-
Next.js - SSG, getStaticPropsReact.js, Next.js 2022. 9. 18. 20:39
Data Fetching: getStaticProps | Next.js Data Fetching: getStaticProps | Next.js Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. nextjs.org 정의 getStaticProps 메서드를 export 한다면, Next.js 는 getStaticProps 에 의해 반환되는 props를 빌드 타입에 프리-렌더할 것입니다. export async function getStaticProps(context) { return { props: {}, // will be passed to the p..
-
Next.js - SSR, getServerSideProps 적용하기React.js, Next.js 2022. 9. 18. 20:30
Data Fetching: getServerSideProps | Next.js Data Fetching: getServerSideProps | Next.js Fetch data on each request with `getServerSideProps`. nextjs.org 정의 getServerSideProps 라는 함수를 한 페이지 내부에서 export할 경우, Next.js는 getServerSideProps 에 의해 반환되는 각 페이지 별 요청에 따른 데이터를 pre-render 할 것입니다. export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as p..
-
Next.js - 초기화 이후 기본 구조 설정하기React.js, Next.js 2022. 9. 18. 20:15
구성 요소 📁 pages 폴더 안에는 넥스트에서 중요한 역할을 하는 특별한 파일들이 있습니다. 📙 _app.jsx (tsx) 📙 _document.jsx (tsx) 📙 _error.jsx (tsx) 📙 404.jsx (tsx) 📙_app.jsx App 컴포넌트는 모든 페이지의 공통 페이지 역할을 합니다. App 컴포넌트를 이용하여 모든 페이지들을 초기화하여 다음과 같은 역할을 할 수 있습니다. 페이지들의 공통된 레이아웃 페이지를 탐색할 때 상태 유지 추가 데이터를 페이지에 주입 글로벌 CSS 추가 📁 pages/_app.jsx import Header from '../components/Header'; const MyApp = ({ Component, pageProps }) => { return ( );..