728x90
반응형
서버 사이드 랜더링
: 서버쪽에서 JS를 다운로드
=> 브라우저는 완성된 html을 전달하기 떄문에 검색엔진 친화적임
=> 다운로드 받고 웹페이지에 표시되니 사용자한테 빠르게 보여짐
Client Side Rendering
리액트 : js 다운로드 받고 화면에 실행됨
=> 클라이언트 쪽에서 랜더링을 한다고해서 "Client Side Rendering"
=> JS가 동작하지 않는 환경에서는 화면에 표시가 안됨 => 검색엔진 SEO에 약함
[배울 것]
* App router
* Server component
1.설치
1) VS code
2) Node js
2. 개발환경
1) npx (node로 만들어진 프로그램을 설치없이 실행 하는 프로그램)
npx create-next-app@latest .> @latest :최신버전
> . : 현재폴더
=>프로그램을 다운 받고 설치가 진행됨
> TypeScipt 안 쓰니깐 No
> App Router를 사용할거여서 Yes
3. next js 실행
npm run dev
> localhost:3000 에서 보이면 성공!
4. 샘플앱 세탁
[오류] next.js 오류 TypeError: minimatch is not a function
>> 재실행 필요한 경우
npm run dev
[layout.js]
import './globals.css';
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}
1) body태그 안의 children =>page.js에서 return 값을 가져옴
[page.js]
import Image from 'next/image';
export default function Home() {
return <> Hello, Nextjs!</>;
}
> 배경이 검은색 + 글자 흰색 = layout.js 파일에 global.css 때문임 > 지워주기
끝.
출처. 생활코딩
반응형
'Next.js' 카테고리의 다른 글
| Next.js : backend (Json-server) | Server Component (0) | 2023.12.20 |
|---|---|
| Next.js : Single Page Application & 이미지 추가 & CSS (0) | 2023.12.19 |
| Next.js : Web tutorial 뼈대 + 라우팅 + 다이나믹 라우팅 (0) | 2023.12.19 |
| Next.js - 배포 (1) | 2023.12.19 |
| Next.js (0) | 2023.12.18 |