728x90 반응형 Next.js9 [next.js]프리렌더링(정적생성, 서버사이드렌더링(SSR)) 프리렌더링(Pre-randering) 웹페이지 로딩 이전에 하는 렌더링 렌더링 과정 서버에서 HTML과 JavaScript 불러오기: 이 단계에서 Next.js는 페이지의 초기 버전을 빌드합니다. 이 초기 버전은 서버에서 생성된 정적 HTML로 구성되며, 클라이언트 측 JavaScript 번들도 포함합니다. 이 과정은 페이지가 빠르게 로드되도록 하며, 검색 엔진 최적화(SEO)에도 유리합니다. 리액트 실행: 사용자의 브라우저가 초기 HTML을 받은 후, 클라이언트 측 JavaScript가 실행되어 리액트를 시작합니다. 이 단계에서 리액트는 서버에서 받은 HTML과 동기화를 시도하며, 필요한 경우 추가적인 데이터를 가져오거나 사용자 인터랙션에 대응합니다. 클라이언트 사이드 렌더링에서 리액트가 화면 조정 (.. 2023. 12. 5. [next.js] Head 컴포넌트와 구글폰트 적용하기 각 페이지 별로 Head 컴포넌트 적용하고 title 변경해주면 페이지 변경할 때 페이지 이름이 변경된다 메타데이터와 외부 리소스 설정 & 연결 import Head from 'next/head'; function HomePage() { return ( {/* 페이지 내용 */} ); } 폰트 적용 기존에 자바스크립트나 리액트, css에서 적용한 방법대로도 가능 나 @import 구글폰트 적용방법 Next.js는 구글 폰트 기능을 제공함 _app.js 에 적용하기 import { Noto_Sans_KR } from '@next/font/google'; const notoSansKR = Noto_Sans_KR({ weight: ['400', '700'], //문자열로 넣기 subsets: [], // 한글.. 2023. 12. 4. [next.js] Image컴포넌트 이미지 컴퍼넌트를 사용하게 되면 주소가 바뀌고 이미지 원본을 바로쓰는게아니라 next.js 서버를 한번 거쳐서 최적화된 크기의 이미지를 가져옴 1. 이미지 크기를 알아서 최적화 해줌 2. lazy 로딩을 지원해서 페이지 로딩 속도도 최적화 해줌 (next.js에는 loading 속성이 적용되어있음, ) ex) 1. Image 컴포넌트를 사용하면 width와 height 속성을 적용해줘야한다 (이미지가 public폴더에 있으면 절대 경로로 지정해준다) import topImage from '@/public/image.jpg'; //import 한 이미지는 width,height 속성 없으면 이미지 크기로 적용됨(에러안뜸) //직접 절대경로로 이미지 넣으면 width,height 없으면 에러 뜸 2. fil.. 2023. 12. 4. [next.js] useContext(다크모드) 다크모드 적용 context 파일 만들기 context/ThemeContext.js import { createContext, useEffect, useState } from "react"; export const ThemeContext = createContext(); export default function ThemeProvider({ children }) { const [theme, setTheme] = useState("dark"); useEffect(() => { document.body.classList.add(theme); return () => { document.body.classList.remove(theme); }; }, [theme]); return ( {children} ); }.. 2023. 12. 4. [next.js] 리다이렉트(redirects), 커스텀 404 페이지 요청 경로를 다른 대상 경로로 리다이렉트 (url을 변경해준다?)를 지정할 수있다 ex) /next/3 => /prev/3 폴더명을 next 에서 prev로 변경하고 참고자료 확인 참고자료 next.js 공식 문서 https://nextjs.org/docs/app/api-reference/next-config-js/redirects 공식문서들어가서 코드 복사해서 next.config.js에 수정하면된다 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async redirects() { return [ { source: '/about', //변경되기 전 경로(param 값이 같이 따라올경우 같이 적어준다.. 2023. 12. 4. [next.js] useRouter hook 쿼리스트링 가져오기 & 페이지 이동하기 쿼리스트링이란 키=값 형태, URL에서 ? 다음에 오는 내용이고 데이터 전달 방법입니다. 이동 버튼과 input 칸에 글 입력하고 엔터누르고 url 확인 const router = useRouter(); const { s } = router.query; //쿼리스트링 가져오기 router.push(`/test?s=${value}`); //페이지 이동 콘솔에 router.query 찍어보면 객체로 나온다. 2023. 12. 1. [next.js]Link 컴포넌트 Link 컴포넌트 리액트의 Link와 비슷하지만 몇가지 차이점이 있다 1. 라이브러리차이 React Router의 Link: React Router 라이브러리에 속함. Next.js의 Link: Next.js 프레임워크에 포함됨. 2. 경로 설정 React Router의 Link: to 속성으로 URL을 설정. ex) Next.js의 Link: href 속성으로 URL을 설정함. ex) About 3. 페이지 로드 방식 React Router의 Link: 페이지 전체를 다시 로드하지 않고 내부적으로 페이지를 바꿈. Next.js의 Link: 페이지 전환 시 자동으로 해당 페이지를 미리 로드하는 '프리패칭' 기능이 있어 더 빠른 로드가 가능. Link 와 a태그 차이 1. a 태그를 사용하면 페이지를 이동.. 2023. 11. 30. [next.js]라우팅(Routing) 라우팅 어떤 주소에 어떤 페이지를 보여줄지 정하는 것 Next.js는!!!! 파일시스템 기반 라우팅 파일의 경로가 주소에 매칭되는 라우팅 방식 page폴더에 index.js가 최상위 경로 ' / ' page폴더에 setting.js 와 search.js 파일 만들고 웹사이트 경로 확인해본다 page/products/1 다이나믹 라우팅 여러주소를 하나의 컴포넌트에서 처리하는 방법 next.js에서는 param 이라고 부른다 param을 사용하여 여러 페이지 랜더링 폴더명을 [id] 로 바꾸고 폴더안에 index.js로 바꿔도 똑같이 적용됨 2023. 11. 30. [next.js]Next.js 시작(설치, css 적용 방법, _app과 _document) Next.js를 사용하는 이유 빠른 로딩: 서버 사이드 렌더링과 정적 사이트 생성을 통해 페이지 로딩 속도를 개선합니다. 쉬운 페이지 라우팅: 파일 기반 라우팅으로 페이지를 쉽게 추가할 수 있습니다. 자동 코드 분할: 필요한 코드만 로드하여 성능을 향상시킵니다. API 라우트: 별도의 백엔드 없이 API를 쉽게 구축할 수 있습니다. 개발자 친화적: 개발 중에 빠른 피드백을 제공합니다. 강력한 커뮤니티 지원: 많은 개발자와 리소스가 있어 문제 해결이 쉽습니다. Next.js의 장점 프리렌더링 vercel로 서버 호스팅 파일 시스템 기반 라우팅 Next.js 셋팅 1. vscode 설치(Lts 적힌거 설치) https://code.visualstudio.com/ 2. node.js 설치 https://nod.. 2023. 11. 30. 이전 1 다음 728x90 반응형
