Giter Site home page Giter Site logo

kagrin97 / nextjs-myblog Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 1.0 19.37 MB

NextJS를 이용해서 블로그를 만들었습니다

Home Page: https://kagrin97-blog.vercel.app/

TypeScript 5.38% JavaScript 0.21% CSS 1.22% Shell 0.01% MDX 93.18%
contentlayer-nextjs nextjs typescript

nextjs-myblog's Introduction

📌 안녕하세요. 저는 React와 Next를 사용해 프론트엔드 개발을 하고 있고 node, express로 백엔드 공부를 하고 있습니다.


nextjs-myblog's People

Contributors

kagrin97 avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Forkers

dongjunson

nextjs-myblog's Issues

fix : React Hydration Error

dev중에 Hydration에러가 나타났습니다. Nextjs에서는 이 문제를 이렇게 설명하고 있습니다.

  • 애플리케이션을 렌더링하는 동안 사전 렌더링된 React 트리(SSR/SSG)와 브라우저에서 첫 번째 렌더링 중에 렌더링된 React 트리 간에 차이가 있었습니다. 첫 번째 렌더링은 React의 기능인 Hydration입니다 .
    이로 인해 React 트리가 DOM과 동기화되지 않고 예기치 않은 콘텐츠/속성이 나타날 수 있습니다.

Nextjs 보여준 해결 방법으로 fix하겠습니다.

home페이지를 꾸밉니다.

원래 home페이지에 존재하던 최신포스트5개를 가져오는 기능을 삭제하고
home페이지를 새로 꾸미겠습니다.

fix: next/head가 적용되지 않는 이슈

안녕하세요, 흥미로운 repo여서 관심있게 봤습니다.
초기 html에 서버에서 동적으로 생성된 메타태그가 주입되지 않는 문제라는 내용을 봤는데, _app.tsx에서 SSR일 때 비어있는 dom을 렌더하게 되어 원하시는 메타데이터가 주입이 되지 않는것을 발견했습니다. 해당 부분을 개선하시면 원하시는 메타데이터가 적용되실거에요.

const [showChild, setShowChild] = useState(false);
useEffect(() => {
setShowChild(true);
}, []);
if (!showChild) {
return null;
}
if (typeof window === "undefined") {
return <React.Fragment></React.Fragment>;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.