예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다.
NextJS를 한 번 써보자라고 생각이 들어서 무심코 yarn create next-app 을 입력했는데 왠걸... NextJS를 익숙할 만큼 접하지는 않았지만, 매우 어색한느낌이었다.
이유인 즉슨 NextJS에서 13버전을 출시하면서 라우팅 방식이 변경되었다. 기존에는 page 방식이었다면, 13부터는 app 방식이라고 한다.
아직 뭔말인지는 모르겠지만... NextJS 13이 궁금해서 못참겠다... 신기술 못참지!!! 13으로 가즈아~
우선 NextJS의 공식 블로그를 확인해보자.
https://nextjs.org/blog/next-13
Next.js 13
Next.js 13 introduces layouts, React Server Components, and streaming in the app directory, as well as Turbopack, an improved image component, and the brand new font component.
nextjs.org
요약
- Next.js Conf 에서 발표한 대로, Next.js 13(안정적)은 제한 없이 동적인 기반을 마련한다.
- 아직은 베타버전이지만, 더 쉽고, 빠르고, 적어진 client JS를 제공하는 app 디렉토리
- Rust를 기반으로하는 Webpack 보다 700배 빠른 Turbopack(alpha)
- 기본 브라우저 Lazy Loading으로 인해 빨라진 next/image
몇 가지 내용이 더 있긴한데 난 잘모르겠다 ... 읽어보니 꽤나 흥미롭긴하다.
생각해보자
그래서 내가 굳이 NextJS를 쓰려는 이유가 뭐야?
- React만으로도 충분하겠지만, 우선은 SEO가 첫번째, 목표는 배포까지고 검색엔진에도 노출되어보고싶은 생각.
그런 목적이라면 SSG만으로도 충분하지 않은가?
- 사실 마케팅 페이지, 블로그 게시물, 포트폴리오 등과 같이 유저가 요청을 보내기 전에 페이지를 미리 만들어두어도 되는 경우에는 SSG만으로도 충분하다. 아직 SSR에 대한 간단한 개념만 있을 뿐이고, 해본적도 없고, 그냥 학습의 목적이 크다.
설치
> yarn create next-app
# or
> npm create-next-app
tailwind를 예전에 nomad coder 강의 들으면서 한 번 써보곤 그 이후로는 안써봤다. 지금은 styled-components에 익숙해져버려서 다른걸 사용할 생각조차 안했는데... tailwind도 꽤나 많이 쓰는거 같으니 한 번 해보자.
프로젝트를 생성하고 나면 위와 같이 프로젝트가 구성된다. 뭘 어떻게 건드려야할지 모르겠다. 공식문서를 참고해보자.
https://nextjs.org/docs/getting-started/project-structure
Getting Started: Project Structure | Next.js
Using App Router Features available in /app
nextjs.org
위 문서를 보면 제공되는 폴더구조는 어떻고 top-level에는 뭐가 있고 app 라우팅 기능을 사용할 때 컨벤션, 기존의 방식인 page 라우팅 기능을 사용할 때 컨벤션을 확인할 수 있다.
app routing convention
우선 라우팅 관련 파일을 보자.
layout.tsx
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
// font 적용
const inter = Inter({ subsets: ["latin"] });
// metadata 설졍
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}기본 제공되는 layout 파일이 가장 최상단 파일인듯하다. index.html 같은 ..?
역시나 이 파일은 app 디렉토리 아래에 필수로 있어야 한다.
page.tsx
import Image from 'next/image'
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
...
</main>
)
}이 파일이 CRA의 App.tsx 같다.
분명 layout.tsx 파일의 children 안으로 들어가는 파일 같은데 ... 어떻게 되는거지 ??
이제 나머지 파일들은 커스텀으로 제작할 수 있는 것 같다.
route, template, default는 어떨때 사용하는거지? 흠... 아직 잘 모르겠다.
라우팅은 위 사진과 같이 할 수 있고, 디렉토리 안에 page.tsx만을 해당 페이지로 인식한다.
Next 13 부터는 모든 리엑트 컴포넌트는 서버사이드 컴포넌트
예전에는 getServerSideProps 함수를 통해서만 할 수 있었던 일을 13 버전부터는 모든 컴포넌트가 서버 사이드 컴포넌트이기 때문에 getServerSideProps를 입력하지 않아도 된다.
