생활코딩 Next.js 13 강의를 듣고 정리한 내용입니다.
강의 링크 : Next.js 13
💡 0. Next.js란 무엇인가?
Full Stack Web Application Framework !
- 프론트엔드는
React로, 백엔드는Express.js와 비슷한 시스템으로 구현 - Server Side Rendering
- app router
- Server component
💡 1. 설치와 실행
- vscode, Node.js 설치
> npx create-next-app@latest .
↑ 세팅은 위와 같이 진행함
💡 2. 샘플앱 세탁
layout.js파일이 기본적인 웹 페이지의 골격을 구성함layout.js,page.js,global.css에서 필요없는 부분 제거
💡 3. 배포
...
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
...build: 배포판을 빌드하는 명령어start: 배포판을 서비스하는 명령어npm run build커맨드를 입력하면,.next폴더 아래에 배포판이 만들어짐npm run start커맨드를 입력하면,.next폴더 아래에 저장된 내용이 서비스되기 시작
💡 4. 뼈대 만들기
- 내용 생략
💡 5. 라우팅
-
path를 이루는 각각의 요소를segment라고 함 -
라우팅은 경로에 따라서 어떤 컨텐츠를 어떤 방식으로 보여줄 것인지 결정하는 것!
-
/create경로에 들어갈 페이지를 만들고 싶으면,app폴더 아래에create폴더를 생성하고, 그 아래에page.js라는 약속된 이름의 파일 생성
→ Next.js 라우팅은 폴더 경로로 이루어지기 때문에👀 -
/create경로로 들어가면,app폴더 아래에create폴더를 찾고, 그 아래 있는page.js와 결합될layout.js가 있는지 찾음 -
create폴더 아래에layout.js가 없으면, 부모 폴더로 나가서layout.js를 찾음 -
layout.js을 찾으면{children}위치에 들어가게 된다!
// src/app/create/layout.js
export default function Layout(props) {
return (
<form>
<h2>Create</h2>
{props.children}
</form>
);
}- 이렇게 작성하면 해당 폴더의
layout.js에 적용됨
💡 다이나믹 라우팅(Dynamic Routing) : 경로를 동적으로 설정하는 것
- 만약
read/1,read/2와 같은 경로의 숫자에id라는 이름을 붙이고 싶다면, 폴더 이름을[id]이런 식으로 설정함! - 그리고 그 아래에
page.js를 만듦
export default function Read(props) {
return(
<>
<h2>Read</h2>
{props.params.id}
</>
)
}props.params.id를 통해 폴더명에 해당하는[id]값을 가져올 수 있음
💡 6. Single Page Application
React는JavaScript기술이기 때문에JavaScript가 동작하지 않으면 아예 페이지가 렌더링 되지 않음
- 개발자도구에서
Disable JavaScript를 실행해 보자! - Next.js는 JS를 꺼버려도 새로고침을 했을 때 페이지가 렌더링됨
Next.js가 서버 쪽에서 React를 실행해서, 그 응답 결과를
.next에 저장해서, 그것을 응답하기 때문에!
- Next.js는 JavaScript가 아닌 HTML을 응답
- 검색 엔진 최적화(SEO)에 좋다!
- 네트워크 탭에서
fast 3G를 설정하면, 인위적으로 네트워크 속도를 지연시킬 수 있음 - 페이지를 방문했을 때, 해당 페이지를 다운로드 받고 있는 도중에 다른 페이지로 이동할 시, 해당 페이지를 처음부터 다시 다운받기 시작함
→ 느리다!
import Link from 'next/link'
import './globals.css'
export const metadata = {
title: 'Web tutorials',
description: 'Generated by hyehye',
}
export default function RootLayout({ children }) {
return (
<html>
<body>
<h1><Link href='/'>WEB</Link></h1>
<ol>
<li><Link href='/read/1'>html</Link></li>
<li><a href='/read/2'>css</a></li>
</ol>
{children}
<ul>
<li><a href='/create'>Create</a></li>
<li><a href='/update/1'>Update</a></li>
<li><input type="button" value="delete" /></li>
</ul>
</body>
</html>
)
}a태그를Link태그로 바꾸면 "Single Page Application"처럼 동작함!
💡 7. 정적 자원 사용하기
public폴더를 통해 사용 가능
💡 8. css
global.css: 전역적인 디자인 적용
💡 9. backend
- 공식문서의
Routing>Route Handlers항목 참고 - 생활코딩 강의에서는 Next.js의 API가 아닌, JSON Server를 구축하여 작업할 것
npx json-server --port 9999 --watch db.json- 터미널에 위 명령어 입력
--watch옵션을 주면,db.json이 변경되었을 때 자동으로 서버 재실행
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}- 실행시키면 이렇게 생긴
db.json파일이 생성됨
{
"topics": [
{
"id": 1,
"title": "html",
"body": "html is ..."
},
{
"id": 2,
"title": "css",
"body": "css is ..."
}
],
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}- 이런 식으로 데이터를 추가하는 것도 가능
쉽게만살아가면재미없어빙고