목차

React 입문 - 목차

Next.js 개요

Next.js(네쿠스토지에에스)는 React의 기능을 확장하기 위한 JavaScript 프레임워크입니다. Next.js를 사용하면 서버 측에서 페이지를 생성하는 서버 측 렌더링 (SSR)을 만들 수 있습니다. 서버측 렌더링을 실시해, 클라이언트측의 페이지 생성 처리를 줄임으로써, 보다 고속의 웹 페이지의 표시가 가능하게 됩니다.
※여기에서 발췌

Next.js는 서버 측 렌더링 (SSR) 및 파일 기반 라우팅과 같은 많은 기능을 제로 구성으로 제공합니다.
※여기에서 발췌

Next.js 설정

여기 "설정"에서 "다시 yarn dev를 실행하면 ..."까지 OK입니다.

정리합니다.

Git Bash 등으로 프로젝트를 만들려는 디렉토리로 이동하여 다음을 실행합니다.

npx create-next-app プロジェクト名
cd プロジェクト名

tsconfig를 배치하려면 다음 명령을 실행하십시오.
※VsCode의 터미널에서는 실행할 수 없었기 때문에, Git Bash로 프로젝트로 이동하고 나서 실행했습니다.

touch tsconfig.json

yarn dev를 실행하지만 다음과 같이 오류가 발생합니다.


무언가가 부족하기 때문에 「yarn add···」를 실행해 주세요라고 하는 것이므로, 거기에 따라 이하를 실행합니다.

yarn add --dev typescript @types/react

다시 다음을 수행합니다.

yarn dev

브라우저에서 다음에 액세스

http://localhost:3000

다음 화면이 됩니다.

Next.js의 페이지 전환 개요

Next.js는 pages/디렉토리에 있는 폴더/파일의 구성에 따라 HTML을 생성하여 페이지 전환을 실현합니다. 라우팅 라이브러리는 필요하지 않으며 URL 구조에 맞게 js(ts,tsx) 파일을 배치하기만 하면 됩니다.

다음 예제에서는 index.tsx가/이고 hoge.tsx가/hoge와 연관됩니다.

--pages
    |--index.tsx -> /
    |--hoge.tsx -> /hoge
    |--fuga.tsx -> /fuga
    |--404.tsx
    |--_app.tsx -> アプリケーションエントリーポイント
    |--_document.tsx -> HTMLドキュメント構造記述用

Next.js에서 페이지 전환을 시도하십시오.

pages 아래에 page1.tsx를 만듭니다.

import Router from 'next/router';
import React from 'react';

export const Page1: React.FC = () => {

    /** ページ遷移クリックイベント */
    const onNextPageClick = () => {
        Router.push('/page2');
    }

    /** レンダー部分 */
    return (
        <>
          <span>ここはページ１です。</span>
          <button onClick={onNextPageClick}>Page2に遷移します。</button>
        </>
    )
}

export default Page1;

page2.tsx도 작성합니다.

import Router from 'next/router';
import React from 'react';

export const Page2: React.FC = () => {

    /** ページ遷移クリックイベント */
    const onNextPageClick = () => {
        Router.push('/page1');
    }

    /** レンダー部分 */
    return (
        <>
          <span>ここはページ２です。</span>
          <button onClick={onNextPageClick}>Page1に遷移します。</button>
        </>
    )
}

export default Page2;

만든 후에는

yarn dev

실행,

http://localhost:3000/page1

에 액세스하여 동작을 확인합시다.

React.FC, export default 등 신비한 코드가 존재하지만,
지금은, 주문이라고 생각해 분위기를 파악해 둡시다.

전환 부분의 구현은

Router.push('/page1');

네요.

이상