NotionNext 문서

Appearance

기본 튜토리얼 - Next.js란 무엇인가 ​

이전 문서: 기본 튜토리얼 - Next.js란 무엇인가 게시일: 2023-7-9 마지막 수정: 2024-9-12 원래 분류: ⌨ 개발 튜토리얼

서문 ​

Next.js는 React 기반의 서버 사이드 렌더링 프레임워크입니다. 개발자가 빠르고 안정적인 애플리케이션을 더 쉽게 만들 수 있도록 여러 내장 기능을 제공합니다. Next.js는 React 애플리케이션 구축 과정을 더 단순하게 만드는 것을 목표로 하며, 프리렌더링, 서버 사이드 렌더링, 정적 페이지 자동 생성 같은 기능을 포함합니다.

Next.js 주요 특징 ​

1. 서버 사이드 렌더링 ​

Next.js는 컴포넌트를 서버에서 렌더링하고, 렌더링된 HTML 코드를 브라우저에 반환해 페이지의 초기 로딩 속도를 높일 수 있습니다. NotionNext 프로젝트는 서버에서 Notion 데이터를 가져오고, 서버에서 페이지 태그를 생성한 뒤 프론트엔드에 반환합니다.

2. 정적 페이지 생성 ​

Next.js는 정적 페이지를 자동으로 생성할 수 있습니다. 이는 SEO가 필요한 페이지에 매우 유용합니다.

3. 파일 시스템 라우팅 ​

Next.js는 pages 디렉터리 아래의 파일 구조를 기준으로 라우팅 규칙을 자동 생성합니다. 따라서 라우팅 설정 과정이 단순해집니다. NotionNext 프로젝트는 /pages 경로 아래에 블로그에서 자주 쓰는 라우트를 미리 정의해 두었고, /themes/theme.js 파일을 통해 라우트를 themes 테마 디렉터리의 레이아웃으로 매핑합니다.

4. 자동 코드 분할 ​

Next.js는 페이지 필요에 따라 코드를 자동으로 분할해 페이지 로딩 속도를 높입니다.

5. CSS-in-JS ​

Next.js는 styled-jsx를 내장하고 있어 개발자가 컴포넌트 안에서 CSS 스타일을 작성할 수 있습니다.

Styling Next.js with Styled JSX

Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. This blog post will help you get started with using Styled JSX in Next.js.

HTML
function Home() {
  return (
    <div className="container">
      <h1>Hello Next.js</h1>
      <p>Let's explore different ways to style Next.js apps</p>
      <style jsx>{`
        .container {
          margin: 50px;
        }
        p {
          color: blue;
        }
      `}</style>
    </div>
  );
}

export default Home;

6. 클라이언트 라우팅 ​

Next.js는 내장 라우팅 컴포넌트를 제공하므로 클라이언트에서 라우트 전환을 처리할 수 있습니다.

기타 ​

Next.js에서 _app.js 파일은 특수한 파일입니다. 모든 페이지의 부모 컴포넌트 역할을 합니다. 이 파일에서 전역 스타일과 컴포넌트, 사용자 정의 오류 페이지, 페이지 로딩 상태 등을 정의할 수 있습니다.

_app.js ​

아래는 NotionNext 프로젝트의 /pages/_app.js 파일입니다.

JavaScript
import { useEffect } from 'react'

// import 'animate.css'
import '@/styles/globals.css'
import '@/styles/nprogress.css'
import '@/styles/utility-patterns.css'

// core styles shared by all of react-notion-x (required)
import 'react-notion-x/src/styles.css'
import '@/styles/notion.css' // Override some styles

import { GlobalContextProvider } from '@/lib/global'

import AOS from 'aos'
import 'aos/dist/aos.css' // You can also use <link> for styles
import dynamic from 'next/dynamic'

// Import custom style CSS and JS
import ExternalScript from '@/components/ExternalScript'

// Extension plugins, animations, and more
const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))

const MyApp = ({ Component, pageProps }) => {
  useEffect(() => {
    AOS.init()
  }, [])

  return (
        <GlobalContextProvider>
            <Component {...pageProps}/>
            <ExternalPlugins {...pageProps} />
            <ExternalScript />
        </GlobalContextProvider>
  )
}

export default MyApp

원문 링크 ​

https://docs.tangly1024.com/article/next-js