매일 공부한거 기록하기

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

(현재 내 프로젝트는 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; 초보는 몰랐다 크크

Next.js는? : React의 SSR을 도와주는 FrameWork이다. React는 js library로 사용자 인터페이스를 만들기위함. 1. Component 2. 단방향 데이터 바인딩 3. JSX (javaScript XML) 4. Virtual DOM 의 특징을 가진다. Next.js 장점 1. 앱에 있는 페이지들이 미리 렌더링 된다. 정적으로 생성됨(static) create-react-app | next.js의 차이 Create-react-app 1. create-react-app 은 CSR로 작동한다 => 클라이언트가 UI를 모두 만듦. 2. 브라우저가 js를 가져와 모든 ui를 만든다. 3. CSR => 연결이 느리다면 흰 화면이 보일 수 있다. 4. . SEO에 최적화 되어있지 않다. ..