삽입하고 싶은 Next.js에서 삽입 예시import Script from "next/script";export default function RootLayout({ children,}: Readonly) { return ( {children} );}
전체 글
https://nextjs.org/docs/app/building-your-application/optimizing/metadata Optimizing: Metadata | Next.jsUse the Metadata API to define metadata in any layout or page.nextjs.orghttps://nextjs.org/docs/app/api-reference/functions/generate-metadata#basic-fields Functions: generateMetadata | Next.jsLearn how to add Metadata to your Next.js application for improved search engine optimization (SEO) an..
이 글은 아래 게시물을 선행하여야합니다. [Next.js] Next.js 네이버 웹마스터 검색 엔진 최적화(SEO) 가이드해당 게시물은 Next.js와 Vercel을 통해 웹사이트를 배포한 상황을 가정하여 진행됩니다. 1. 사이트 등록 및 소유확인1) 배포한 웹사이트 URL 복사 https://searchadvisor.naver.com/console/board 네이버네이sooncoding.tistory.com https://search.google.com/search-console?resource_id=https://callo-mu.vercel.app/ Google Search ConsoleSearch Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, G..
해당 게시물은 Next.js와 Vercel을 통해 웹사이트를 배포한 상황을 가정하여 진행됩니다. 1. 사이트 등록 및 소유확인1) 배포한 웹사이트 URL 복사 https://searchadvisor.naver.com/console/board 네이버네이버에 로그인 하고 나를 위한 다양한 서비스를 이용해 보세요nid.naver.com2) 네이버 웹마스터 도구 접속 3) 입력칸에 배포 URL 붙여넣기 4) 소유확인 진행 클릭 5) 'HTML 확인 파일'을 클릭해 파일 다운로드 [ public / naverOOOO.html ]6) 다운로드한 파일을 public 폴더로 이동7) 커밋 -> 푸쉬 -> 배포 8) https://...URL... 링크 클릭 9) 사이트 인증 확인 10) 소유 확인 클릭 11) 소유 확..
설치npm install @next/third-parties@latest 코드 (전역 경로 GA)app / layout.tsx import { GoogleAnalytics } from '@next/third-parties/google' export default function RootLayout({ children,}: { children: React.ReactNode}) { return ( {children} )} 코드 (단일 경로 GA)app / page.tsximport { GoogleAnalytics } from '@next/third-parties/google' export default function Page() { return }
미리보기 소개Noistack 라이브러리는 React 애플리케이션에서 간편하게 알림(Notification)과 같은 메시지를 처리할 수 있도록 도와주는 유틸리티입니다.주로 Material-UI(MUI)와 함께 사용하며, 스낵바(Snackbar)를 활용한 사용자 피드백을 쉽게 구현할 수 있습니다. 주요 특징간단한 사용법: 기본적으로 훅(hook)을 통해 알림을 호출.Customizable: 알림 스타일 및 동작을 자유롭게 설정 가능.Stacking 지원: 여러 알림을 동시에 쌓아 보여줌.1. 설치npm install notistack2. 기본 사용법1) Provider 설정SnackbarProvider를 루트 컴포넌트에 추가합니다.import React from "react";import ReactDOM f..
설치$ npm install next-pwa next.config.ts 설정[경로 : / next.config.ts ]// eslint-disable-next-line @typescript-eslint/no-require-importsconst withPWA = require("next-pwa")({ dest: "public", register: true, skipWaiting: true,});/** @type {import('next').NextConfig} */const nextConfig = { // ...기존에 추가했었던 next.config.ts 설정};module.exports = withPWA(nextConfig); manifest.json 생성 [경로 : / public / man..
기본 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 특정 줄 수 이상만 ...으로 표시 display: -webkit-box; -webkit-line-clamp: 3; // 3줄 이상이면 ellipsis 적용 -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; overflow-wrap: break-word;