Next.js19 홈페이지 상단에 노출시키기 회사에서 만든 홈페이지가 홈페이지 명으로 검색을 했을 때 8페이지에서 노출되는 문제가 발생했다. 해당 프로젝트는 작년 3월 첫 입사를 하고 [ 모바일 ] 부분만 담당해서 개발하게 된 홈페이지인데, 실제 도메인에배포한지 1년이 넘도록 8페이지에 머물러 있던 것이다. 이런 문제를 인지하지 못하고 있다가 이번에 검색을 하다가 노출되지 않는 것을 확인하고 점검을 시작했다.우선 회사명과 유사한 이름의 서비스가 하나 있었고 동일한 이름의 가수가 무려 2명이나 존재했다.... 일단 홈페이지를 보면서 점검을 진행하면서 부족한 부분을 함께 작업을 진행하기로 했다. OG 태그공유를 할 때 사용되는 태그가 바로 OG 태그이다. 현재 개발 환경이 Next.JS이므로 원한다면 SSR을 통해서 페이지에 맞는 제목과 썸네일을.. 2024. 5. 11. 개발 환경 구성하기 개요. 개발자로써 [ GitHub만 있으면 그만 아니야? ] 라는 생각으로 살다가 어느날 문뜩 프론트엔드 개발자인데 정작 나를 위한 웹사이트는 하나도 없네? 생각을 하게 되었다. 비교적 옛날 유형어 자기 PR의 시대라는 말이 있는데 나를 알리기 위해서 어떤 것을 보여줄 수 있을까? 하다 못해 관심이 있는 SEO를 마음껏 고려하면서 홈페이지를 만든다면 괜찮지 않을까? 또 내가 배우며 공부한 기능, 기술을 회사에 100% 반영할 수 없는 것은 당연한 현실이다. 공부에서 끝나지 않고 자연스럽게 홈페이지에 적용한다면 그것도 재밋지 않을까? 라는 생각을 했다. 그 첫번째 시작이 개발 환경 구성이다. 히스토리. 현재 회사의 개발 환경은 내가 프로젝트를 진행하면서 경험한 불편함을 보안하면서 만들고 있다. ( 이것을 .. 2024. 4. 21. Lighthouse 실행에 영향을 미치는 문제가 발생했습니다. NEXT.JS를 사용해서 개발을 진행하고 성능 확인을 위해서 Lighthouse 검사를 돌렸는데 별거 안했는데 성능이 좋아서 개발 실력이 좋아졌다고 생각했는데 어림도 없었다. 자세히 보이 오류로 인해 결과가 불완전한 것이었다. Lighthouse 실행에 영향을 미치는 문제가 발생했습니다. 라는 오류가 나왔다. 특정 컴포넌트가 너무 커서 그런가 싶어서 컴포넌트를 지워도 보고 Dynamic Import 으로 인해서 검사 중 컴포넌트가 렌더링되서 발생한 문제인지 Static Import로 변경도 해봤는데 여전히 오류가 발생했다. 원인을 찾기 위해서 현재 페이지를 다시 한번 검토를 해보는데 특이한 부분이 있었다. 상세 페이지 흔하게 사용하는 Link 컴포넌트이다. 하지만 다른 점이 바로 현재 라우팅에서 deta.. 2024. 4. 18. [Next.js] Next.js 배포 시 발생한 문제 ( 'Build optimization failed: found page without a React Component as default export in pages/...' error ) Next.js 프로젝트를 배포하기 위해서 build 중 오류가 발생했다. 'Build optimization failed: found page without a React Component as default export in pages/...' error 해석해보면 React 컴포넌트가 아닌 것을 export 하는 페이지는 렌더링 될 때 오류를 일으키거나 빌드 성능을 저하시킬 수 있다고 한다. 한마디로 pages 폴더 안에 React 컴포넌트 외 다른 파일이 존재하기 때문에 발생한 문제였다. 나같은 경우 styled-components를 사용한 코드를 모아두는 Style.js 파일이 있어서 발생한 문제였다. 해결 방법 간단하게 Style.js 파일을 외부로 이전시켜주는 것으로 해결했다. 앞으로는 pag.. 2023. 3. 22. [Next.js] Infinity Scroll 무한 스크롤은 프론트엔드 개발자가 만나게 되는 몇가지 귀찮은 작업일 것이다. 그리고 나는 이번에 만나게 되었다. 환경은 Next.js & React-Query이다. 그렇다 React-Query를 사용하고 있다. 이 전부터 React-Query는 무한 스크롤을 쉽게 구현할 수 있게 제공해주는 것이 있는 걸로 알고있다. 그래서 이번에 해당 기능을 사용하려고 한다. useInfiniteQuery 무한 스크롤을 구현할 수 있게 도와주는 아주 강력한 Hook이다. const { data, fetchNextPage, hasNextPage, status, } = useInfiniteQuery( "list" , getList , { getNextPageParam: ({pagination:{ paginationCount.. 2023. 3. 6. [Next.js] Next.js와 styled-components Next.js에서 styled-components를 같이 사용할 때 오류가 발생했다. 찾아보니 styled-components를 사용했을 때의 className과 실제 적용되었을 때의 className이 달라서 발생하는 문제였다. 최초 실행 시에는 css가 제대로 적용이 되었는데, 페이지 이동 & 새로고침이 발생했을 때 위와 같은 오류가 나오면서 css가 적용이 되지 않았다. 찾아보니 next.js에서 초기 렌더링은 ssr로 적용되고, 이후 페이지 이동 등은 csr로 렌더링이 된다. 초기 렌더링 시에는 ssr로 적용되기 때문에 문제가 없었지만 이후 csr로 적용되기 때문에 클래스 명이 맞지 않아서 발생한 것 같다. 해결 방법 구글에 검색 했을 때 기본적으로 해결하는 방법이 있었다. .babelrc에서 설.. 2023. 3. 2. [Next.js] _document & _app Next.js는 페이지에 공통으로 적용되는 _document와 _app이 존재한다. _app 서버에 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로 공통 레이아웃 역할을 한다. 애플리케이션이 실행되면 가장 먼저 호출되기 때문에 글로벌한 작업을 수행할 때 사용한다. function app({ Component, pageProps }) { return } app.getInitialProps = async (appContext) => { // ... return { ...appProps } } 사용 예. 페이지 전환 시에도 전체 레이아웃을 유지하고 싶은 경우 페이지 전환 후 state를 유지하고 싶은 경우 페이지에 추가적인 데이터를 삽입하고 싶은 경우 글로벌 CSS를 적용하고 싶은 경우 _document _.. 2022. 9. 10. [Next.js] getInitialProps vs getStaticProps vs getServerSideProps Next.js는 SSR이 가능한 특징을 가진 React 프레임워크이다. Next의 ServerSide Cycle Server가 GET 요청을 받는다. 요청에 맞는 Page를 찾는다. _app.js에 getInitialProps가 있다면 실행한다. 하위 Component의 getInitialProps가 있다면 실행하고 pageProps를 받아온다. 모든 props를 구성하고, _app.js => Component 순서로 렌더링을 한다. Content를 구성하면 _document.js를 실행해 html 형태로 출력한다. 여기서, 모든 페이지에서 공통적인 데이터 패칭이 필요하면, _app.js에서 데이터 패칭을 하고, 페이지마다 다른 데이터가 필요하면 각 페이지에서 데이터 패칭을 해주면 된다. Next.js .. 2022. 9. 9. [Next.js] 404 페이지 Next.js에서 404 페이지를 만드는 것은 아주 간단하다! 404페이지 pages 폴더 내부에 404.js 파일을 만들어서 일반 컴포넌트를 만드는 것처럼 만들어주면 된다. 404 외에도 500번대, 또는 다른 400번대 에러 페이지도 마찬가지로 에러번호.js를 붙여서 만들 수 있다. 2022. 7. 5. 이전 1 2 3 다음 반응형
