Next.js

[ Next.js ] Next.js 설치및 설정

변쌤(이젠강남) 2024. 11. 5. 02:32
반응형

Next.js 란

 

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등을 손쉽게 구현할 수 있도록 돕는 도구입니다. Next.js는 다양한 기능을 통해 웹 애플리케이션의 성능 최적화와 개발자 경험을 향상시키며, React를 확장하여 SEO 최적화, 빠른 로딩 속도, 서버와 클라이언트 간의 데이터 통신 간소화 등을 가능하게 합니다.

 

주요 기능

  1. 파일 기반 라우팅: pages 폴더 내의 파일 구조만으로 라우팅이 가능해, 별도의 라우터 설정 없이 직관적으로 페이지를 구성할 수 있습니다.
  2. 서버 사이드 렌더링(SSR): 서버에서 렌더링을 실행하여 초기 페이지 로딩 속도를 빠르게 하고 SEO를 강화합니다.
  3. 정적 사이트 생성(SSG): 빌드 시점에 페이지를 미리 렌더링해 배포함으로써 빠른 로딩과 캐싱 효과를 얻습니다.
  4. 클라이언트 사이드 네비게이션: 기본적으로 Link 컴포넌트를 사용하여 클라이언트 사이드에서 페이지 전환이 가능하며, 이를 통해 부드러운 사용자 경험을 제공합니다.
  5. API Routes: 서버 측 API를 쉽게 생성할 수 있어, 클라이언트와 백엔드 간의 통신을 간편하게 합니다.
  6. 이미지 최적화: next/image 컴포넌트를 통해 이미지 크기와 형식을 자동 최적화하여 성능을 향상시킵니다.

 

장점

  • SEO 친화적: 서버 사이드 렌더링으로 검색 엔진 최적화가 쉽습니다.
  • 성능 최적화: 코드 스플리팅과 정적 최적화 등으로 웹 애플리케이션의 성능을 극대화합니다.
  • 쉬운 배포: Vercel 등과 같은 플랫폼에서 Next.js 프로젝트를 간편하게 배포할 수 있습니다.

 

단점

 

  • 구현 복잡성 증가: SSR/SSG 사용 시 선택과 구현이 복잡할 수 있음.
  • 커스텀 라우팅 제한: 파일 기반 라우팅으로 복잡한 라우팅에 제약이 있음.
  • 클라이언트 전용 코드 제약: 브라우저 전용 코드 사용 시 주의 필요.
  • 빌드 시간 증가: 페이지가 많을수록 빌드 시간이 길어짐.
  • 서버 부담 증가: SSR 사용 시 서버 리소스를 많이 소모함.
  • 일부 리액트 기능 제한: 특정 React 기능과 호환성 문제 발생 가능.
  • 학습 필요성: SSR, SSG 등 Next.js 기능 학습 필요.
  • SPA에 비효율적: 단순 SPA에는 과도한 기능일 수 있음.

 

 

 

 

 

 

1. 설치

npx create-next-app@latest

또는 

yarn create next-app

 

 

yarn add react-icons

yarn add reset-css

yarn add sass

 

 

2. 실행 

yarn dev

 

 

3. globals.css

@import 'reset-css';

body {
    font-size: 16px;
    line-height: 1.6;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #999;
}

 

 

4. layout.css

import './globals.css';
import { Noto_Sans_KR } from 'next/font/google';

// Noto Sans KR 폰트 설정
const notoSansKR = Noto_Sans_KR({
    subsets: ['latin'], 
    weight: ['400', '700'], // 필요에 따라 폰트 두께 선택
});

// 페이지의 메타데이터 설정
export const metadata = {
    title: '홍길동의 포트폴리오',
    description: '홍길동이 제작한 다양한 프로젝트와 포트폴리오를 소개합니다.',
};

export default function RootLayout({ children }) {
    return (
        <html lang='ko'>
            <body className={notoSansKR.className}>{children}</body>
        </html>
    );
}

 

 

 

5. page.js 

const Home = () => {
    return (
        <main>
            <h1>테스트</h1>
        </main>
    );
};

export default Home;

 

 

 

7. jsx 형식

 {/* <style jsx>로 CSS-in-JS 스타일 작성 */}
            <style jsx>{`
                
                ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    display: flex;
                     
                }
               
            `}</style>

 

 

8. use client

'use client';

 

"use client";를 추가하여  컴포넌트를 클라이언트 컴포넌트로 지정

onClick 이벤트 핸들러를 사용 가능

 

 

9. Link 

<Link href='' >

 

 

10. image 처리 

import Image from 'next/image';


<Image src='' alt='' width={숫자} height={숫자} />

 

  • Image 컴포넌트: next/image에서 Image 컴포넌트
  • width와 height 속성: Image 컴포넌트에는 width와 height 속성이 필수로 필요합니다. 이미지 크기에 맞게 숫자를 지정 

 

 

 

11. page.js / layout.js 

 

page.js는 특정 경로에 해당하는 페이지 컴포넌트를 정의하는 파일

app 폴더의 각 하위 디렉토리에 page.js 파일이 있다면, 그 디렉토리가 해당 경로의 페이지로 인식

/app/page.js는 루트 경로 /의 페이지를 담당

/app/about/page.js는 /about 경로의 페이지를 담당

 

layout.js

layout.js는 해당 디렉토리와 그 하위 디렉토리에 있는 모든 페이지에 공통 레이아웃을 적용하는 역할

app/layout.js 파일은 전체 애플리케이션의 루트 레이아웃을 정의하며, 모든 페이지에서 이 레이아웃을 사용

하위 디렉토리에도 layout.js 파일을 생성할 수 있으며, 각 하위 레이아웃은 해당 디렉토리 내에서만 적용

 

예)

 

// app/layout.js
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <header>
                    <h1>My Website</h1>
                    <nav>
                        <a href="/">Home</a>
                        <a href="/about">About</a>
                    </nav>
                </header>
                <main>{children}</main>
                <footer>
                    <p>© 2024 My Website</p>
                </footer>
            </body>
        </html>
    );
}

 

 

 

11. 사용자 정의 함수  / scroll 함수

export function useScrollTo() {
    const scrollToEl = (e) => {
        e.preventDefault(); // 기본 링크 동작(페이지 이동)을 막음
        const hash = e.currentTarget.hash; // 현재 클릭된 요소의 해시 (#) 값을 가져옴
        const offsetTop = document?.querySelector(hash)?.offsetTop; 
        // 해시로 지정된 요소의 y좌표 (offsetTop)를 가져옴

        scroll({
            top: offsetTop, // 스크롤 위치를 해당 요소의 y좌표로 설정
            behavior: 'smooth', // 부드러운 스크롤 효과 적용
        });
    };

    return { scrollToEl }; // scrollToEl 함수 반환
}

 

 

  • e.preventDefault():
    • 클릭 이벤트의 기본 동작을 막아줍니다. 이 코드에서는 해시가 있는 앵커 링크(예: <a href="#section1">)의 기본 동작(페이지 이동)을 방지하여 스크롤 애니메이션만 작동하도록 합니다.
  • const hash = e.currentTarget.hash:
    • 클릭된 요소의 해시 값(예: #section1)을 가져옵니다. e.currentTarget.hash는 클릭된 요소의 href 속성에 지정된 해시 값을 반환합니다.
  • const offsetTop = document?.querySelector(hash)?.offsetTop:
    • querySelector를 사용해 해시와 일치하는 요소(예: <div id="section1">)를 선택하고, 해당 요소의 offsetTop 값을 가져옵니다. offsetTop은 문서 최상단으로부터 해당 요소까지의 거리입니다.
    • document?.querySelector(hash)?.offsetTop 형식으로 작성하여 document나 querySelector의 결과가 없을 때도 안전하게 동작하도록 설정했습니다.
  • scroll({ top: offsetTop, behavior: 'smooth' }):
    • scroll() 메서드를 사용해 스크롤 위치를 지정한 offsetTop으로 이동합니다.
    • behavior: 'smooth'는 스크롤이 부드럽게 이동하도록 설정합니다.
  • return { scrollToEl }:
    • scrollToEl 함수를 반환하여 이 훅을 사용하는 컴포넌트에서 scrollToEl을 호출할 수 있게 합니다.

스크롤 실행

import React from 'react';
import { useScrollTo } from './hooks/useScrollTo';

export default function Navigation() {
    const { scrollToEl } = useScrollTo();

    return (
        <nav>
            <a href="#section1" onClick={scrollToEl}>Go to Section 1</a>
            <a href="#section2" onClick={scrollToEl}>Go to Section 2</a>
        </nav>
    );
}

 

 

 

 

 

 

 

 

반응형

'Next.js' 카테고리의 다른 글

[ Next.js ] nextjs 배포  (0) 2024.11.20

'Next.js'의 다른글

  • 현재글[ Next.js ] Next.js 설치및 설정

관련글

티스토리툴바