次.初心者ガイド

21973 ワード

tutorial react javascript beginners テキストリンク

フォローミー!
次は何か.JS ?
これは、サーバー側のレンダリングや静的サイトの生成などの機能を有効にするフロントエンドの開発Webフレームワークです.
サーバー側のレンダリング?
伝統的な反応アプリ全体のアプリケーションが読み込まれ、クライアントにレンダリングされます.次.JSは、最初のページの負荷をSEOとパフォーマンスに最適ですサーバーによってレンダリングすることができます.
次.他の利点

の簡単なページ・ルーティング

サーバAPIルート

静的サイト生成(Gatsbyのような)

簡単な配備

次作成.ファーストプロジェクト
インストールして、次を作成します.JSのプロジェクターを使用すると、便利なノードNPXコマンドを使用することができます'次のアプリ私のアプリ名'を作成します

$ npx create-next-app my-app-name

または、Cookieの前設定

$ npx create-next-app -e with-tailwindcss my-app-name

これは、フォルダを作成し、すべてのファイルを作成し、設定し、すべてを次の起動する必要があります.jsアプリ.
一度アプリを起動することができます作成されます

$ cd your-app-name
$ npm run dev

これはあなたの次を起動します.JS空アプリ.デフォルトでは歓迎ページが既に作成されます.
ページとルーティング
次に.我々はルーティングライブラリを使用する必要はありませんルートを管理するJS.
次.JSルーティングは実装が非常に簡単です.
ときに新しい次を作成します.次のアプリのコマンドを作成すると、アプリはデフォルトでは、フォルダの名前'ページ'を作成するアプリケーション
このページのフォルダはあなたのルート管理です.したがって、フォルダ内のすべての反応コンポーネントファイルは、特定のルートとして扱われます.
たとえば、フォルダがそれらのファイルを含んでいるならば:

インデックス.JS

アバウト.JS

ブログ一覧にもどる.JS このファイルは自動的に3つのルートで変換されます.

インデックスページlocalhost/インデックス

アバウトページlocalhost/およそ

ブログページlocalhost/ブログ

ご覧の通り、原理はとても簡単です.
また、次に' localhost/home 'のように存在しないルートを参照してください.jsは自動的に見つからない404ページを表示します
ここでの例について.JSページ.あなたが見ることができるように、何もページについて指定されません.これは、定期的に反応機能コンポーネントです

function AboutPage() {
    return (
        <div>
            <h1>About</h1>
        </div>
    )
}

export default AboutPage

入れ子ルート
どのようにlocalhost/ブログ/連絡先のような入れ子のルートについてはどうですか?
ネストしたルートを作成するには、サブフォルダを作成する必要があります.
例えば:ページ/ブログ
そのフォルダの中にあなたの'連絡先を作成することができます.JSの反応コンポーネントは、ページlocalhost/ブログ/連絡先を作成します
インデックスを作成する場合.次のサブフォルダのJSファイル.JSはあなたのルートルートを表すためにそのコンポーネントを使用します.ページ/ブログ/インデックスを表示します.js
ページ/ブログにファイルを作成する場合.JSともう一つのページ/ブログ/インデックス.jsどちらも同じlocalhost/blogルートを表します.その場合は次に.JSはブログだけをレンダリングします.jsファイル.
それぞれのブログ記事が独自のルートを持っているダイナミックルートについてはどうでしょうか

Localhost/ブログ/マイファーストブログ

Localhost/ブログ/マイセカンドブログポスト

次に.JSは、ブラケット表記を使用して動的なルートを作成できます.
例えば、ページ/ブログ/[スラグ].js
ファイル名にブラケットを含めるのはちょっと変なようです.
スラグ変数がuserouteフックを使用してルートから抽出することができるならば.
ここに[スラグ]の例.JSページ

import { useRouter } from 'next/router'

function PostPage() {
    const router = useRouter()
    return (
        <div>
            <h1>My post: {router.query.slug}</h1>
        </div>
    )
}

export default PostPage

それは基本的な例です.実際のアプリでは、スラグの変数は、ポストファイルを読み込むか、対応するポストのデータベース内の検索に使用されます.
路線リンク
今あなたの最初のルートを作成しました.私はあなたがそれらのルートにページをリンクする方法を疑問に思っていますか?それを行うには' next/link 'が必要です
次のページへのリンクを持つホームページの例を示します.

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="about">About</Link>
    </div>
  )
}

ページに戻る場合は、ホームページに戻ってくるリンクを作成します.次のように入力できます

<Link href="/">Home</Link>

スタイルを作成するには、この構文を使用する必要があります.

<Link href='/about'>
    <a className="text-blue-500">About this project</a>
</Link>

ルートリダイレクト
どのような場合は、特定のページにリダイレクトを強制したいですか?たとえば、ボタンをクリックして?あなたは'ルータを使用することができます.そのために押してください.

import Link from 'next/link'
import { useRouter } from 'next/router'

function About() {
  const router = useRouter()

  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page</p>
      <button onClick={() => router.push('/')}>Return to home</button>
    </div>
  )
}

どこでコンポーネントを置く?
多くの場合、コンポーネントやレイアウトファイルを作成します.たとえば、Navbarをレンダリングするコンポーネント.
今まで我々はページのフォルダを使用している.あなたのコンポーネントがルートページであることを望まないならば、どうですか?あなたは、ユーザーが開いたページのように行くのをdontします:localhost/navbar
あなたがNavbarを置くならば、それは追加されるものです.ページフォルダ内のJSコンポーネント.
その場合どうするか簡単に、別のフォルダ内のすべての'ページ'コンポーネントを配置する必要があります.
ほとんど次の慣例によって.JSはフォルダ名'コンポーネント'を使用し、このフォルダは、アプリケーションのルートフォルダで作成されます.
たとえば、レイアウトコンポーネントを作成する場合は、「新規コンポーネントフォルダ:/構成/レイアウト」でそれを実行できます.js
その反応コンポーネントは、あなたのアプリのどこにでも使用することができますが、ルートページとして参照するNEです.
ヘッドコンポートメント
次.JSサーバー側レンダリング最初のページを読み込みます.それを行うには、あなたのHTMLページを操作します.ヘッダーセクションを含む.
タイトルまたはメタのようなヘッダーセクションタグを提供するには、次を使用する必要があります.JSヘッドコンポーネント.
ヘッドコンポーネントを使用したレイアウトコンポーネントの例を示します.

// components/Layout.js
import Head from 'next/head'
function Layout({title, keywords, description, children}) {
    return (
        <div>
            <Head>
                <title>{title}</title>
                <meta name='description' content={description}/>
                <meta name='keywords' content={keywords}/>
            </Head>
            {children}
        </div>
    )
}

export default Layout

Layout.defaultProps = {
    title: 'This is my app title',
    description: 'This is my app description',
    keywords: 'web, javascript, react, next'
}

カスタム404が見つかりませんページ
これは、カスタム404のページが見つかりません作成することが可能です.メッセージをパーソナライズしたり、独自のページレイアウトを含めることができます.
クリエイト404 .ページフォルダのJSファイル.
次.404は遭遇するとき、自動的にこのページにリダイレクトされます.
カスタム404ページの例を次に示します

// pages/404.js
import Layout from '../components/Layout'

function NotFoundPage() {
    return (
        <Layout>
            Sorry the page you are looking is no where to be found.        
        </Layout>
    )
}

export default NotFoundPage

インポートショートカット別名
あなたのアプリがますます成長するように.いくつかのコンポーネントは、あなたのアプリケーションフォルダー構造の深い入れ子にすることができます.

import Layout from '../../components/Layout'

これは、いくつかのキーストロークを保存し、そのような結果を得るためにショートカットを作成することが可能です.

import Layout from '@/components/Layout'

@ charはショートカット構文です.
このショートカットを作成するには、ファイル名' jsconfig 'を作成する必要があります.あなたのアプリケーションのルートでJSON '

// jsconfig.json
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/components/*": ["components/*"],
        }
    }
}

サーバ側データフェッチ
クライアント側でデータを取得する代わりに、次に.JS缶
ページ内のサーバー側のレンダリングを有効にし、初期データの人口を行うことができます、それはすでにサーバーからのデータが格納されているページを送信することを意味します.
サーバー側データの取得には2つのオプションがあります.

それぞれの要求

のデータを取得する

ビルド時(静的サイト)で一度だけデータを取得する
リクエストごとにデータを取得する
各リクエストに対するサーバー側のレンダリングには、GetServerSideProps関数を使用する必要があります.
この関数をコンポーネントファイルの末尾に追加できます.

export async function getServerSideProps() {
  const res = await fetch(`http://server-name/api/items`)
  const items = await res.json()
  return {
    props: {items}, 
  }
}

あなたのコンポーネントファイルにその関数が存在するならば、次に.JSは、自動的にGetServerSidePropsオブジェクトでコンポーネント小道具を満たします.
ビルド時にデータを取得する
ビルド時にサーバー側でレンダリングするには、GetStaticProps関数を使用する必要があります.
この関数をコンポーネントファイルの末尾に追加できます.

export async function getStaticProps() {
  const res = await fetch('http://server-name/api/items')
  const items = await res.json()
  return {
    props: {items}, 
  }
}

また、ビルド時にデータを取得したい場合もありますが、動的パス(
私たちにページ名の投稿をしましょう.js
それはあなたに私の最初のポスト、ポスト/マイセカンドブログなどのポストのルートを与える.
このような場合、GetStaticPathを使用してビルド時にすべてのサブルートを作成できます

export async function getStaticPaths() {
    const res = await fetch(`${API_URL}/posts`)
    const posts = await res.json()
    const paths = posts.map(post => ({params: {slug: post.slug}}))
    return {
        paths,
        fallback: true,
    }
}
export async function getStaticProps({params: {slug}}) {
    const res = await fetch(`${API_URL}/posts?slug=${slug}`)
    const posts = await res.json()
    return {
        props: {
            post: posts[0]
        }
    }
}

イメージ最適化
次.JSは、組み込みの画像コンポーネントと自動画像の最適化をしています.
次.JSイメージコンポーネント、次/画像は、現代的なWebのために進化したHTML 要素の拡張です.
画像はデフォルトで怠惰にロードされます.つまり、ページの速度はビューポート外の画像に対してペナルティされません.彼らはビューポートにスクロールして画像を読み込みます.
最初にイメージコンポーネントをインポートします

import Image from 'next/image'

コンポーネントで使用します.

<Image
  src="/image.png"
  alt="Picture of the author"
  width={500}
  height={500}
/>

場合は、次の詳細について知りたい.あなたが公式ドキュメンテーションを読むことができるJSイメージ構成要素:https://nextjs.org/docs/api-reference/next/image
結論
今日はこれです.私はまだ反応について来る多くの記事を持っているので、あなたが何も欠場することを確認したい場合はクリックして私に従ってください!
フォローミー!

Reference

この問題について(次.初心者ガイド), 我々は、より多くの情報をここで見つけました https://dev.to/ericchapman/next-js-beginner-s-guide-8l3

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

ORACLE DBテスト

ssdbで発生した問題