Next.js

7398 ワード
React テキストリンク
Nextの実行
  • npm init
  • npm i react react-dom prop-types next@9//学習時バージョン
  • pagesフォルダ
    • を作成
  • pagesフォルダにインデックスします.作成js(Welcome page)
    • index.js
    import React from 'react';

const Home = () => {
  return (
    <div>
        Hello, Next!
    </div>
    );
};

export default Home;
    💎 nextでpagesフォルダを検索し、各ファイルを自動的にpageにルーティングします.
    ページとレイアウト
  • ビットと同じ方法でPagesフォルダにファイルを設定します.js, signup.jsファイルを作成します.
  • コンポーネントフォルダを作成し、フォルダにAppLayoutを配置します.jsファイル(汎用レイアウト全体をキャプチャするためのファイル)
    • を作成します.
    AppLayout.js
    import React from 'react';
import propTypes from 'prop-types';

const AppLayout = ({ children }) => {
  return (
    <div>
        <div>공통메뉴</div> // 공통으로 들어갈 내용
        { children }  // AppLayout 컴포넌트로 감싼 부분이 들어간다.
    </div>
    );
};

// children으로 들어온 모든 요소를 검사하기위해 propTyes를 사용
AppLayout.propTyes = { 
    children: propTypes.node.isRequired,
};

export default AppLayout;
    index.js
    import React from 'react';
import AppLayout from '../components/Applayout';

const Home = () => {
  return (
    <AppLayout> // 공통 레이아웃을 적용하기위해 AppLayout 컴포넌트로 감싸준다.
      <div>Hello, Next!</div>
    </AppLayout>
    );
};

export default Home;
    リンクとeslint
    Link
    💎 Nextはreact-routerではなく、Nextに付属のリンクコンポーネントを使用してパスを設定します.
    AppLayout.js 
    import React from 'react';
import propTypes from 'prop-types';
import Link from 'next/link';

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

AppLayout.propTyes = {
    children: propTypes.node.isRequired,
};

export default AppLayout;
    eslint
    コードを固定ルールにまとめるためのパッケージ
    インストールeslint
    1. eslint
    2. eslint-plugin-import
    3. eslint-plugin-react
    4. eslint-plugin-react-hooks
  • npm i eslint eslint-plugin-import eslint-plugin-reactieslint-plugin-reactit-hooks-D(導入時に不要なパッケージなのでdevDependencesとしてインストール)
    • 182
  • プロジェクト内です.eslintrcファイル
    • の作成
    .eslintrc
    {
    "parserOptions": {
        "ecmaVersion":2022,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "plugins": [
        "import",
        "react-hooks"
    ],
    "rules": {

    }
}
    CSSで擬似要素の中にテキストを置く方法?
    再送ファイル管理システム最適化js