#오늘 배운 것
Next.js에서의 페이지란? pages 폴더 안에 있는 react component
// pages/about.js (1)
export default function About() {
return <div>About Page</div>
}
// pages/about/index.js (2)
export default function About() {
return <div>About Page</div>
}
// pages/index.js (3)
export default function Index() {
return <div>Index Page</div>
}페이지 이동
next/link
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/about">About Us</Link>
</li>
<li>
<Link href="/blog/hello-world">Blog Post</Link>
</li>
</ul>
)
}
export default Home
Next에서는 Static Routing(정적 라우팅)과 Dynamic Routing(동적 라우팅)을 지원
Next.js는 파일 시스템 기반의 라우팅을 해준다
pages 경로에 파일을 추가하면 자동적으로 route할 수 있다
=> Next.js 프로젝트 안의 'pages' 라는 폴더에 라우팅하고 싶은 이름으로 된 파일을 만들어주면 되는 것.
=> 자연스럽게 우리가 만든 파일 이름을 주소로 라우팅되는 것이 정적 라우팅이다.
Dynamic Routes
Next.js는 dynamic routes를 제공
- pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
- pages/[username]/settings.js → /:username/settings (/foo/settings)
- pages/post/[...all].js → /post/* (/post/2020/id/title)
<pages/post/[pid].js>=> pages 안에 post라는 폴더를 만들고 그 안에 [pid].js 파일을 만들었다.
/post/1 , /post/abc 등의 주소는 모두 post/[pid].js로 매칭된다.
대괄호 안의 임의의 이름은 라우터 객체의 query 속성으로 들어간다.
// pages/post/[id]
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { id } = router.query
return <p>Post: {id}</p>
}
export default Post
API Routes
Next.js 프로젝트에서 Node 서버 없이 api를 만들어 배포할 수 있도록 만들어주는 기능입니다. DB에 접근하거나, 시크릿 환경 변수에 접근하는 등에 사용
pages/api/* 아래에 api를 만들 수 있습니다.
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
}Dynamic API Route
pages/api 아래 있는 파일들은 yarn build를 통해서 프로젝트가 빌드 될 때 클라이언트 번들에 포함되지 않습니다
// pages/api/test/[id].js
export default function handler(req, res) {
const { query } = req;
const { id } = query;
res.status(200).json({ name: "test", id });
}SEO(Search Engine Optimization)
구글, 네이버 등 검색 엔진에서 사이트를 찾기 쉽도록 사이트를 개선하는 작업을 말합니다. Next.js을 이용하는 이유도 SSR와 SSG을 통해 검색 엔진 최적화를 하기 위해서입니다. SEO를 위한 방법은 정말 다양하게 있으나, 개발자의 관점에서 검색 엔진 최적화를 위해 할 수 있는 노력들을 정리해보겠습니다.
크롤링
- robots.txt 파일 설정
- 웹 크롤러와 같은 로봇들의 접근을 제어하기 위한 규칙 파일
- /public 폴더 안에 넣어준다.
- sitemap.xml 제출
- next-sitemap같은 라이브러리를 이용해 생성
- Google Search Console에 제출
인덱싱
- Meta tag 설정
- <Head> 컴포넌트를 이용해서 _app.js 파일 및 페이지 파일에 Meta tag 설정
- Open Graph 설정
- Open Graph란?
- <Head> 컴포넌트를 이용해서 _app.js 파일 및 페이지 파일에 Meta tag 설정
'[내일배움캠프] > TIL' 카테고리의 다른 글
| 23.02.03) Next js 기초를 복습 및 후발대 강의를 배운 67일차 (0) | 2023.02.06 |
|---|---|
| 23.02.02) Next js 기초를 복습 및 후발대 강의를 배운 66일차 (0) | 2023.02.02 |
| 23.01.31) Next js 기초를 배운 64일차 (0) | 2023.01.31 |
| 23.01.30) Typescript 프로젝트를 마무리한 63일차 (0) | 2023.01.31 |
| 23.01.27) Typescript 프로젝트 글 수정 기능을 작업한 62일차 (0) | 2023.01.27 |
