SSR을 위한 Next.js 시작!
🛠️ 블로그 개발해보기 - END 🛠️
에서 CSR,CRA 블로그를 만들었으나, 블로그의 seo를 위해서라면 Next.js를 사용해야했다. CSR 홈페이지의 장단점을 몸소 익혀봤으니 이제 SSR의 장단점을 몸소 익혀볼때다.
Next.js 13 app/Directory
나는 Next.js를 처음 공부해본다.
이왕이면 최신 버전인 app을 배워서 그걸로 계속 가고싶었지만..
아직 app dir은 베타라서 Vercel 배포는 지원하지 않는것같다.
공식 문서에서도 배포 가이드는 비활성화 되어있다.
app dir은 아직 베타버전이기 때문에 제품은 pages로 배포하는게 좋다.
app 구조
//next.config.js
const nextConfig = {
experimental: {
appDir: true,
},
};app을 사용하려면 next.config.js에 설정을 해주어야한다.
타입스크립트를 사용해서 tsx파일입니다.
-
폴더 방식 라우팅
pages가 파일 이름 라우팅 방식이라면app은 온전한 폴더 방식 라우팅이다.
app의 각 폴더안에는 page.tsx가 필수이다.
app/page.tsx === pages/index.tsx
app/about/page.tsx === pages/about.tsx
인것이다. -
page.tsx: 페이지에서 보여줄 고유의 화면.
//`app/page.tsx` is the UI for the root `/` URL
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}head.tsx: head 부분 설정.
export default function Head() {
return (
<>
<title>My Title</title>
</>
);
}layout.tsx: UI 구조 설정.
export default function RootLayout({ children }: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);children이 page를 보여주는 부분이다.
loading.tsx: 로딩중일때 보여줄 화면.error.js: 현재 페이지의 에러를 보여준다,not-found.tsx: 404화면을 보여준다.
Next.js 13 React 컴포넌트는 서버사이드 컴포넌트이다.
async function getData() {
const res = await fetch('https://api.example.com/...');
if (!res.ok) {
throw new Error('Failed to fetch data');
}
return res.json();
}
export default async function Page() {
const data = await getData();
return <main></main>;
}원래라면 getServerSideProps를 사용해야하지만
그냥 리액트 컴포넌트 안에서 fetch를 할수있다....
모든 컴포넌트가 서버사이드 컴포넌트라는건 너무 매력적이다.
블로그를 빨리 app으로 배포하고싶다.
