学習資料Zero Choの基礎知識講座-ReactによるNodeBird SNSの作成

1.nextのインストール

まずfrontフォルダでpakageを使用します.jsonを作成してインストール(npm init)next

npm i next@9

講義で使用するnextバージョンに合わせて、9バージョンが設定されています.
最新バージョンをインストールするには、npm i nextを入力するだけです.
その後のパッケージ.jsonで、スクリプトの「text」を「dev」:「next」に変更します.
react(npm i react react-dom)のインストール

2. pages

frontフォルダにpagesフォルダを作成し、indexを作成します.jsファイルを生成します.
ちなみにpagesフォルダの名前はpagesでなければなりません.
n/a.理由
:Nextはpagesフォルダを認識し、その中のすべてのフォルダを個別のコード剥離pageコンポーネントとして作成するためです.
参照としてnextjsではimportを用いて応答する必要はないが,この講義では直接使用することに慣れている.
-pagesフォルダ内に別のフォルダを作成することもできます.
ページにaboutフォルダ>testを作成します.jsファイルの作成
http://localhost:3000/about/test道。に入るとHello Testでよく表示されていることを確認できます
-確認中に発生したエラー
画面をnpm rundevに変更しようとしたところ、エラーが発生しました.

  error:0308010C:digital envelope routines::unsupported

調査では,ノードバージョンが高いことが問題であることが分かった.
ソリューション:terminalに次のように入力します.

  export NODE_OPTIONS=--openssl-legacy-provider
  [출처] https://han-py.tistory.com/407

これは根本的な解決策ではないので、できるだけノードバージョンを下げて構築することが望ましい.

3. components

Page以外のコンポーネントはfrontフォルダ内にコンポーネントフォルダを個別に作成して管理します.
(コンポーネントフォルダの名前はpages名で変更できます.)
AppLayoutは、コンポーネントフォルダの汎用レイアウトを管理します.jsファイルの作成

//AppLayout.js
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';

const AppLayout = ({ children }) => {
  return (
    <div>
      <div>공통내용</div>
      {children}
    </div>
  )
};

AppLayout.proptypes = { //props로 넘기는 애들을 proptypes로 검사
  children: PropTypes.node.isRequired,
};

export default AppLayout;

//index.js
return(
  <AppLayout>
    <div>Hello, Next!</div> //이렇게 감싸진 애들이 children 자리에 들어간다.
  </AppLayout>
)

結果

4. Link

共通メニューに各ページに切り替えられるリンクを作成します.
reactrouterはnextでは使用されず、独自のnextルータを持っています.

//AppLayout.js
import Link from 'next/link';

const AppLayout = ({ children }) => {
  return (
    <div>
      <div>
        <Link href="/"><a>노드버드</a></Link>
        <Link href="/profile"><a>프로필</a></Link>
        <Link href="/signup"><a>회원가입</a></Link>
      </div>
      {children}
    </div>
  )
};

aラベルに書くのではなく、

hrefをリンクに書くことに注意してください.

結果
の各テキストを押して、対応するページに進みます.

5. eslint

eslintを使用してコードルールを作成し、コードが整然としているようにします.
インストールeslint

npm i eslint -D
npm i eslint-plugin-import -D
npm i eslint-plugin-react-hooks -D

「frontフォルダ内」です.ファイル「eslintrc」の作成

{
  "parserOptions": {
    "ecmaVersion" : 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx" : true
    }
  },
  "env" : {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "import",
    "react-hooks"
  ],
  "rules" : {
    
  }
}