Next.js 入門チュートリアル

mkdir nextDemo //プロジェクトを作成 npm init //プロジェクトを初期化 npm i react react-dom next --save //依存関係を追加

 「スクリプト」: {
    "test": "echo \"エラー: テストが指定されていません\" && exit 1",
    「開発」：「次へ」、
    "ビルド" : "次のビルド",
    「開始」: 「次の開始」
  },

関数インデックス(){
    戻る （
        <div>こんにちは Next.js</div>
    ）
}
デフォルトインデックスをエクスポート

npm 実行 dev

npm install -g create-next-app //scaffolding のグローバルインストール create-next-app nextDemo //scaffolding に基づいてプロジェクトを作成 cd nextDemo
npm run dev //プロジェクトを実行する

'react' から React をインポートします
'next/link' からリンクをインポートします
const ホーム = () => (
  <>
    <div>私はホームページです</div>
    <div><Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><a>ページ A に移動</a></Link></div>
    <div><Link href="/pageB" rel="external nofollow" ><a>ページ B へ移動</a></Link></div>

  </>
）

エクスポートデフォルトホーム

 //<div> の書き方が間違っている
  <リンク href="/pageA" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" >
    <span>ページ A へ移動</span>
    <span>フロントエンドブログ</span>
  </リンク>
</div>

//正しい書き方 <Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <あ>
    <span>ページ A へ移動</span>
    <span>フロントエンドブログ</span>
  </a>
</リンク>

'next/router' から Router をインポートします。

<button onClick={()=>{Router.push('/pageA')}}>ページAへ移動</button>

'next/link' からリンクをインポートします

// <Link href="/blogDetail?bid=23" rel="external nofollow" ><a>{blog.title}</a></Link> を渡します

    
    
//ブログ.js
'next/router' から { withRouter} をインポートします
'next/link' からリンクをインポートします

const BlogDetail = ({router})=>{
    戻る （
        <>
            <div>ブログ ID: {router.query.name}</div>
            <Link href="/" rel="external nofollow" ><a>ホームページに戻る</a></Link>
        </>
    ）
}
//withRouter は Next.js フレームワークの高度なコンポーネントであり、ルーティングを処理するために使用されます。export default withRouter(BlogDetail)


/********************************************************************************************/
'next/router' から Router をインポートします。

<button onClick={gotoBlogDetail} >ブログの詳細</button>

関数gotoBlogDetail(){
    ルータ.push('/blogDetail?bid=23')
}

//オブジェクトフォーム関数gotoBlogDetail(){
    ルータ.push({
        パス名: "/blogDetail",
        クエリ:{
            入札:23
        }
    })
}

<Link href={{pathname:'/blogDetail',query:{bid:23}}><a>ブログの詳細</a></Link>

ページ/投稿/[pid].js
ルート: /post/abc --> クエリ: { "pid": "abc" }


ページ/投稿/[pid]/[コメント].js
ルート: /post/abc/a-comment --> クエリ: { "pid": "abc", "comment": "a-comment" }

//ルートが変更されると、Router.events.on('routeChangeStart',(...args)=>{
    console.log('1.routeChangeStart->ルートの変更が開始されます。パラメータは次のとおりです:',...args)
})

//ルートが変更されると、Router.events.on('routeChangeComplete',(...args)=>{
    console.log('routeChangeComplete->ルート変更が完了しました、パラメータ:',...args)
})

// トリガー前のブラウザ履歴 Router.events.on('beforeHistoryChange',(...args)=>{
    console.log('3, beforeHistoryChange-> ブラウザ履歴を変更する前にトリガーされました、パラメータ:',...args)
})

//ルートジャンプでエラーが発生した場合、Router.events.on('routeChangeError',(...args)=>{
    console.log('4, routeChangeError-> リダイレクトエラー、パラメータ:',...args)
})

/******************************** ハッシュルート***********************************/

Router.events.on('hashChangeStart',(...args)=>{
    console.log('5, ジャンプ開始時にhashChangeStart->hashが実行され、パラメータは次のとおりです:',...args)
})

Router.events.on('hashChangeComplete',(...args)=>{
    console.log('6, hashChangeComplete->hash ジャンプが完了しました。パラメータは次のとおりです:',...args)
})

// 投稿はビルド時に getStaticProps() によって設定されます
関数 Blog({ 投稿 }) {
  戻る （
    <ul>
      {posts.map((投稿) => (
        <li>{投稿タイトル}</li>
      ))}
    </ul>
  ）
}

// この関数はサーバー側でビルド時に呼び出されます。
// クライアント側では呼び出されないので、
// 直接データベースクエリ。「技術的な詳細」セクションを参照してください。
非同期関数 getStaticProps(context) をエクスポートします。
  // 投稿を取得するには外部 API エンドポイントを呼び出します。
  // 任意のデータ取得ライブラリを使用できます
  const res = フェッチを待機します('https://.../posts')
  const posts = res.json() を待機します

  // { props: { posts } } を返すことで、Blogコンポーネントは
  // ビルド時にプロパティとして `posts` を受け取ります
  戻る {
    小道具: {
      投稿、
    },
  }
}

デフォルトのエクスポートブログ

関数 Page({データ}) {
  // データをレンダリングします...
}

// これはリクエストごとに呼び出されます
非同期関数 getServerSideProps(context) をエクスポートします。
  // 外部APIからデータを取得する
  const res = フェッチを待機します(`https://.../data`)
  const データ = res.json() を待機します

  // props 経由でページにデータを渡す
  戻り値: { プロパティ: { データ } }
}

デフォルトページをエクスポート

[名前].module.css
//ログインモジュール.css
.ログインDiv{
    色: 赤;
}

//サードパーティのスタイルを変更する.loginDiv:global(.active){
    色:rgb(30, 144, 255) !重要;
}

'./login.module.css' からスタイルをインポートします
<div className={styles.loginDiv}/>

npm i sass --save

定数パス = require('path')

モジュール.エクスポート = {
  sassオプション: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

<p style={{ color: 'red' }}>こんにちは</p>

関数HelloWorld() {
  戻る （
    <div>
      こんにちは世界
      <p>スコープが設定されました!</p>
      <スタイルjsx>{`
        ｐ {
          色: 青;
        }
        div {
          背景: 赤;
        }
        @media (最大幅: 600px) {
          div {
            背景: 青;
          }
        }
      ` </スタイル>
      <スタイル グローバル jsx>{`
        体 {
          背景：黒;
        }
      ` </スタイル>
    </div>
  ）
}

デフォルトのHelloWorldをエクスポートする

<ヘッド>
    <title>テクニカルファットな人たちが一番太っている！ </タイトル>
    <メタ文字セット='utf-8' />
</ヘッド>