Next.js는 Vercel에서 개발한 React 프레임워크로, 일반적이고 중복되는 작업(예: 라우팅)을 비교적 간단하고 강력한 API로 추상화하여 React 개발자의 삶을 편하게 해줍니다. 그렇게 하면 바퀴를 재발명하는 대신 앱 작성에 집중할 수 있습니다.

Next.js는 빠른 서버 측 렌더링을 가능하게 하고 서버에 구애받지 않는 React 라이브러리 위에 구축된 가벼운 오픈 소스 JavaScript 프레임워크입니다(즉, 자체 내장 HTTP 서버와 함께 사용하거나 모든 Node.js 서버와 함께 사용). Zeit의 사람들이 내놓았습니다. 라우팅은 페이지에서 간단히 수행되며 웹 사이트를 쉽고 빠르게 시작하고 실행할 수 있습니다. 사실, 우리는 5분 이내로 할 것입니다.

왜 Next.Js인가?

1) 비교적 배우기 쉽다

그게 다야. React를 작성해 본 적이 있다면 Next.js를 사용하면 편할 것입니다. 고급 도구와 강력한 API 지원을 제공하지만 사용을 강요하지는 않습니다.

2) 내장 CSS 지원

구성 요소 기반 프레임워크에서 CSS를 작성하려면 "캐스케이드"가 필요합니다. 그렇기 때문에 CSS-in-JS 도구가 있지만 Next.js는 자체 제공물인 styled-jsx와 함께 즉시 제공되며 다양한 스타일링 방법론도 지원합니다.

3) 자동 TypeScript 지원

Next.js를 사용하여 TypeScript로 코딩하는 것을 좋아한다면 문자 그대로 TypeScript 구성 및 컴파일을 자동으로 지원하게 됩니다.

4) 다중 데이터 가져오기 기술

SSG 및/또는 SSR을 지원합니다. 둘 중 하나 또는 둘 다 사용하도록 선택할 수 있습니다.

5) 파일 시스템 라우팅

한 페이지에서 다른 페이지로 이동하는 것은 앱의 파일 시스템을 통해 지원됩니다. 라우팅을 처리하기 위해 특별한 라이브러리가 필요하지 않습니다.

설치



NPM을 사용하여 종속성과 함께 Next.js를 설치합니다.

먼저 Next.js 프로젝트를 보관할 디렉토리를 만들고 그 안으로 들어갑니다.

mkdir my-portfolio-site
cd my-portfolio-site

그런 다음 package.json 파일로 초기화하고 y 플래그를 사용하여 계속 진행하고 npm init -y 질문을 건너뜁니다.

이제 Next.js를 설치할 준비가 되었습니다.

npm install react react-dom next

Next.js는 한 가지 예외를 제외하고는 프로젝트를 구성하는 방법에 대해 지나치게 독단적이지 않습니다. 모든 실제 웹 페이지는 페이지 폴더 안에 들어가야 하므로 계속해서 mkdir 페이지를 만들어 보겠습니다.

마지막으로 실행 스크립트 언어로 package.json을 업데이트하여 Next.js 앱을 초기화하겠습니다. package.json 파일을 열고 스크립트 아래에 다음을 추가합니다.

"dev": "next",
"build": "next build",
"start": "next start"

이제 Next.js를 설치했습니다. 그래서 그것에 뛰어들 수 있습니다.

첫 번째 구성 요소 만들기

Next.js는 JavaScript이고 React 위에 있기 때문에 일부 구성 요소만 빌드하면 됩니다. 라우팅은 구성 요소의 이름으로 수행되므로 예를 들어 mysite.com/blog는 페이지 디렉터리에 있는 blog.js라는 파일에서 가져옵니다.

즐겨 사용하는 코드 편집기에서 프로젝트를 열고 페이지 디렉터리에 index.js라는 파일을 만듭니다.

일부 HTML을 반환하는 구성 요소를 만들어 봅시다!

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>Welcome to my portfolio! This is designed with Next.js!</p>
    </div>
)

export default Index

이제 명령줄에서 npm run dev를 실행하고 웹 브라우저에서 http://localhost:3000으로 이동하면 이 콘텐츠가 제공되는 것을 볼 수 있습니다.

링크 API 작업

우리 모두 React에서 페이지 렌더링을 좋아하지 않습니까? Next.js Link API를 사용하여 Next.js로 동일한 클라이언트 측 탐색을 수행할 수 있습니다. 포트폴리오 사이트에 연락처 페이지가 있다고 가정하면 다음과 같은 업데이트된 인덱스 구성 요소가 있을 것입니다.

import Link from 'next/link';

const Index = () => (
    <div>
        <h1>My Portfolio Site</h1>
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index

먼저 Next.JS에서 Link API 모듈을 가져온 다음 {' '} 구문을 사용하여 자리 표시자를 만들어 콘텐츠 중간에 인라인으로 사용했습니다. 구성 요소는 고차 구성 요소이며 href(및 href 인수 자체는 쿼리 문자열 등과 같은 인수를 지원함) 및 URL 마스킹과 같은 몇 가지 인수만 지원합니다. 기본 구성 요소, 이 경우 tag supports other props like style and onClick.

Making Smaller Reusable Components
Now we are off to a great start, but can you imagine having to rewrite our header for every page we create? That's why we break up our site into small reusable components!

Next.js has no opinion on how you should do this. But, remember, if you put them in the pages directory they will be accessible to to the outside world directly. Do you want someone directly accessing your header, navbar and footer? If not, then place them outside it. Go ahead and create a components top level directory: mkdir components and touch header.js to create a header.js file.

Open up the header.js file in your code editor and create a header component!

const Header = () => (
    <div>
        <h1>My Portfolio Site</h1>
    </div>
)

export default Header

Then go ahead and go back to your index.js file and incorporate your new header:

import Link from 'next/link';
import Header from '../components/header';

const Index = () => (
    <div>
        <Header />
        <p>
            Welcome to my portfolio! This is designed with Next.js!
            Please{' '}
                <Link href="/contact">
                    <a>contact me</a>
                </Link>{' '}
            to get more information.
        </p>
    </div>
)

export default Index

Now all that new component did was save us one

하지만 실제 사이트에는 하나의 HTML 태그보다 훨씬 더 많은 태그가 있다는 것을 이해하는 데 많은 상상력이 필요하지 않습니다. 이제 Next.js를 성공적으로 설치하고, 새 프로젝트를 초기화하고, 구성 요소를 만들고, Next.js Link API를 사용하여 연결하고, 프로젝트 전체에서 구성 요소를 재사용했습니다. 이것은 구축할 수 있는 훌륭한 토대입니다. Next.js에는 JavaScript의 CSS, 사용자 지정 서버(예: Express 사용), 페이지 간 상태 전달 등과 같은 훨씬 더 많은 기능이 있습니다. 문서를 확인하여 더 깊이 파고들고 Next.js로 다음 단계를 즐겨보세요! 읽어 주셔서 감사합니다.