728x90
반응형
1. Single Page Application
서버 사이드 랜더링 : 리액트는js가 동작하지않으면 랜더링 되지 않음
=> Next.js 만든 웹페이지는 리로드해도 랜더링이 잘 됨.
=> Next.js 는 js가 아닌 html을 응답함
=> a태그를 Link로 변경하기만해도 SPA가 되는 마법을 볼 수 있음.
단점..
네트워크 > fast 3G (웹페이지 지연 현상 만들기 가능)
=> 특정 페이지 (홈) 을 방문했을때, 처음부터 끝까지 모든 페이지를 다운 받아서
사용자 입장에서는 느리고, 서비스 제공하는 입장에서는 돈이 많이 들음,,,
[layout.js]
import './globals.css';
export const metadata = {
title: 'Web tutorials',
description: '2023-12-19',
};
export default function RootLayout({ children }) {
return (
<html>
<body>
<h1>
<a href="/">WEB</a>
</h1>
<ol>
<li>
<a href="/read/1">html</a>
</li>
<li>
<a href="/read/2">css</a>
</li>
</ol>
<a> 태그를 <Link> 태그로 변경
<ol>
<li>
<Link href="/read/1">html</Link>
</li>
<li>
<Link href="/read/2">css</Link>
</li>
</ol>
=> 클릭하지 않아도 백그라운드에서 미리 가져옴 + 클릭하자마자 짠! 나타남
=> 재방문 할때는 서버랑 통신 안함 => 속도 빠르고 돈 줄이기 가능
▼
웹페이지가 여러페이지임에도 불구하고 한 페이지 처럼 구현 => Single Page Application7
2. 정적 자원 사용하기 (이미지 추가)
(1)
이미지를 public 폴더 안에 넣어주기
(2) page.js 에 코드 추가
import Image from 'next/image';
export default function Home() {
return (
<>
<h2>Welcome</h2>
Hello,Web!
<img src="/folder.png"></img>
</>
);
}
3. css
[globals.css]
h1 a {
text-decoration: none;
}
>> 추가하고 싶은 css 넣기
[layout.js]
import Link from 'next/link';
import './globals.css';
>> layout.js 안에 globals.css를 가져오기 때문에 여기에 css 코드 수정하는 곳을 알 수 있음.
끝.
출처 : 생활코딩
반응형
'Next.js' 카테고리의 다른 글
| Next.js : 데이터 조회 (서버 컴포넌트) & 새글 작성( 클라이언트 컴포넌트) + 캐시 (1) | 2023.12.20 |
|---|---|
| Next.js : backend (Json-server) | Server Component (0) | 2023.12.20 |
| Next.js : Web tutorial 뼈대 + 라우팅 + 다이나믹 라우팅 (0) | 2023.12.19 |
| Next.js - 배포 (1) | 2023.12.19 |
| Next.js 13 : 설치와 실행 (0) | 2023.12.19 |