매일 공부한거 기록하기

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props 를 보고 공부했다. Data Fetching: getServerSideProps | Next.js Fetch data on each request with `getServerSideProps`. nextjs.org 1. getServerSideProps getServerSideProps 함수를 페이지로부터 export한다면 Next.js는 매 요청할때마다 getServerSideProps로 부터 리턴된 데이터들을 이용해서 pre-render될것이다. export async function getServerSideProps(context) { return { props: {..

https://nextjs.org/docs/basic-features/pages#server-side-rendering 공식문서 번역하면서 공부해보기 for study ! :) Basic Features: Pages | Next.js Next.js pages are React Components exported in a file in the pages directory. Learn how they work here. nextjs.org 1번 케이스 : 페이지의 컨텐츠가 외부데이터에 의존할때 export default function Blog({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ) } 사전렌더링안에서 데이터를 fetch할때 , Ne..

Note : Next.js 13버전에선 app/ directory를 사용한다. 생성된 파일 구조 1. Page 각각의 페이지는 파일의 이름으로 라우팅을 한다 :) 예를들어 pages폴더안에 about.tsx를 만들었다면 /about의 경로로 접근 할 수 있다. 2. 동적라우팅 Next.js는 동적 라우트를 제공하는데 예를들어 pages/posts/[id].js 를 만든다면 posts/1, posts/2 ... 등의 경로로 접근 할 수 있다. 3. Pre-rendering Next.js는 HTML파일을 미리 생성한다. => SEO에 더 유리하다 브라우저에서 페이지가 로드될때 자바스크립트 코드가 작용하면서 인터랙티브하게 만드는데 이걸 하이드레이션이라고 부른다. 3. 프리렌더링의 두가지 형태 Static Ge..

예전에 공부했던 글들은 비공개로 돌렸당 다시 해야지~~~ 공식문서💖 https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 1. Next.js란? SSR을 가능하게 해주는 리액트 프레임 워크. (리액트는 CSR) SEO에 유리하다 2. Next 시작하기 공식문서 따라하기 npx create-next-app@la..

1. pages폴더 안에 파일을 만들면 그 파일명이 경로가 된다 이렇게 pages폴더 밑에 폴더를 만들면 폴더 명이 경로가 된다. 경로 이동을 해서 보여줄 파일을 만든다. 2. 경로 이동이 필요한 파일에 next/link로부터 Link를 import 시켜준다. import Link from "next/link"; 3. 로 감싸주고 href 로 경로를 정해준다. 그리고 태그로 감싸준다. click to brand! 4. Next.js공홈에 자세히 나와있다! https://nextjs.org/docs/api-reference/next/link

className을 쓴적이 없는데 이런 에러가 왜났을까? 괜히 파일에서 className을 열심히 찾았다 .. 🤬 저번에 정리한것처럼 Next.js에서 styled-components를 사용할때 생기는 이슈이다. _document를 따로 생성해 사용할때 Next는 첫페이지를 SSR로 렌더링하고 그 후 클라이언트에서 CSR로 렌더링한다 따라서 이 후 클라이언트에서 작동하는 클래스명이 서로 달라지게 되는것이다. className이 달라지지 않게 하기 위해 1. 아래의 명령어를 설치해주고 npm install --save-dev babel-plugin-styled-components 2. .babelrc파일의 plugins에 설정을 추가한다. { "plugins": ["babel-plugin-styled-co..

(현재 내 프로젝트는 typescript이기때문에 .tsx임) 1. _app.tsx ,_document.tsx 파일은 server only file : 따라서 client에서 사용하는 로직은 사용할 수 없다. 1-1. _document.tsx 파일이 pages폴더 안에 없다면 만들면 된다. 2. 모든 페이지는 _app을 통해 가장 먼저 실행된다. : pages/_app.tsx : Global CSS는 _app에 추가한다. 3. _document.tsx는 모든 페이지에서 공통으로 사용되는 html,head(meta), body 태그등을 커스텀할때 사용한다. : HTML마크업위주이다. : 이때 Html, Head, Main, NextScript를 반드시 포함해야한다. 안넣으면 이런 에러 나옴;; (경험담ㅎ)..

이거 할때마다 왜 자꾸 안되는건지? 지금 걍 정리하면서 시작해보려고 한다 1 . typeScript와 next설치 npx create-next-app --typescript 2. project이름은 위 명령어 입력 후 입력한다 ✔ What is your project named? test 3. npm run dev 입력 후 실행한다. 4. styled-components설치하기 npm install styled-components 5. styled-components type설치하기 npm install -D @types/styled-components babel-plugin-styled-components 6. styled-components babel preset설치 npm i --save-dev b..

Next.js를 시작해보려고 한다 이런 에러는 _documnet.파일에서 NextScript가 없어서 생긴 에러이다 next/document에서 NextScript를 import해준후 안에 를 넣어주면 금방 해결된다 import Document, { Html, Head, NextScript } from "next/document"; import React from "react"; const _document = () => { return ( ); }; export default _document; 초보는 몰랐다 크크

그냥 나는 하던것처럼 .env 파일에 환경변수를 REACT_APP_으로 설정 했을 뿐인데... console.log에 찍어보니 없다...! 당황해서 여기저기 찾아봤고..삽질만 했다 큽 next.js에서는 환경변수 prefix는? NEXT_PUBLIC_ 였ㄷㅏ...^^..ㅋ NEXT_PUBLIC을 쓰는 이유는? 1) React컴포넌트를 사용해 빌드되어 클라이언트에게만 보여지는 React UI 부분 2) Next.js 서버에서 실행되는 부분 이렇게 두가지 부분이 있다. /pages/api라우팅 getServerSideProps() 서버사이드 props를 가져올때 getStaticProps() 빌드시 한번만 props를 가져올때 위의 세가지 기능은 항상 서버에서 실행되므로 NodeJS의 프로세스에 액세스 한다..