Next.js 개요 및 프로젝트 구조
Next.js 2023. 8. 28. 03:26Next.js는 server-side rendering등 여러 편의 기능을 지원하는 React 프레임워크이다.
회사에서 다른 분이 Next.js로 프로젝트를 진행하는 것을 보면서, React를 사용하여 기능을 구현해야 여러 기본 기능들을 구현하기 위해서는 서드파티 라이브러리들을 적절히 활용해야 하며, 프로젝트 시작 시 프로젝트 설정을 위해 여러 라이브러리를 설치하는 등 여러 선행 작업 들을 진행해야 한다.
이를 간단히 얘기해보자면, 스타일링을 위해서는 styled-component나 tailwindCSS를 설치하고, 라우팅 기능을 위해서는 React-Router라이브리러리를 설치해야 한다.
해당 작업에는 그리 오래 걸리는 작업이 아니지만 여건 번거로운 것이 사실이다.
Next.js에서는 기본적으로 초기 설정시, styled-component, tailwindCSS중 하나를 선택할 수 있고, Page Router나 App Router를 사용할 것 인지 선택할 수 있다.
이것 뿐만 아닌 초기 설정 시, 여러 옵션을 사용할 수 있도록 아래와 같은 것들을 사용자에게 물어보고 있다.
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
What import alias would you like configured? @/*
Page Router를 사용하여 라우팅을 위해서는 pages 폴더를 만들고 하위에 원하는 경로의 이름에 맞게 폴더나 파일을 만들면 된다.
예를 들면 www.home.com/ 로 라우팅했을때의 화면을 구성하기 위해서는 pages/index.tsx로 파일을 구성하면 된다.
그리고 해당 파일 내부 컴포넌트는 다음과 같이 구성하면 된다. 해당 컴포넌트가 위치하는 곳이 body태그 속에 위치한 다는 것을 염두하면 된다.
const IndexPage = () => {
return (
<div>
<h1>Index Page</h1>
</div>
);
};
export default IndexPage;Next.js에서 페이지를 랜더링 하기 위해서는 _app.tsx파일과 _document.tsx파일이 필요하다. 각 파일별 내용은 다음과 같다.
pages/_app.tsx
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}_app.tsx는 App컴포넌트를 생성한 후, 페이지를 초기화를 하며 다음과 같은 기능을 실행할 수 있다.
- Create a shared layout between page changes
- Inject additional data into pages
- Add global CSS
- 페이지 전환사이에 공유 레이아웃 구성
- 페이지로 추가 데이터 주입
- 글로벌 CSS 추가
pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}page router에서 페이지 구성을 위해 필요한 구성 요소를 초기화하는 파일이다.
이외에도 Next.js에는 여러 구성 요소가 있다. 아래 사이트에서 자세히 알아볼 수 있다.
Docs | Next.js
Using App Router Features available in /app
nextjs.org
앞으로도 Next.js로 여러 가지를 구성하면서 기능들을 알아가 볼 생각이다.
'Next.js' 카테고리의 다른 글
| fsd 아키텍처을 사용해보자 1 - memo app (0) | 2025.03.22 |
|---|---|
| next.js with bun (0) | 2024.11.21 |
| 로그인 페이지 구성 with TailwindCSS (0) | 2023.11.07 |
| Next.js 13에서 tailwindcss를 사용하여 동적 스타일링 컴포넌트 구성하기 (0) | 2023.08.27 |
| Next.js 13에서 tailwindcss가 적용되지 않는 오류 해결 (1) | 2023.08.26 |
