を作成し、次のダイナミックなウェブサイトを展開します.js

17701 ワード
react nextjs webdev tutorial テキストリンク
Next.js 生産グレードの反応アプリケーションとウェブサイトスケールを開発するためのフレームワークです.
このチュートリアルでは、次を作成します.からのNBAチームに関するデータを取り入れるJSウェブサイトSportsDB API .

次を作成します。JSプロジェクト


私たちは走り始めるnpx create-next-app 最も簡単な方法は、次から始まります.js
一度終了run npm run dev とローカルサーバがhttp://localhost:3000 が開始されます.

ホームページ


開けるpages/index.js ファイルとすべてのプレースホルダのコードを削除します.
きれいな出発点で、我々はNBAですべてのチームのリストを返すAPI要求をします:
const endpoint = "https://www.thesportsdb.com/api/v1/json/1/search_all_teams.php?l=nba";
export async function getServerSideProps() {
  const res = await fetch(endpoint);
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}
次.JSは、それぞれのリクエストによって返されるデータを使用してこのページをプレレンダリングしますgetServerSideProps .
私たちはパスすることができますdata にHome() チーム名とロゴを出力する関数
export default function Home({ data }) {
  const { teams = [] } = data;
  return (
    <div className="teams">     
      {teams.map((team) => {
        const { idTeam, strTeam, strTeamBadge } = team;
        return (   
          <div key={idTeam}>      
            <img src={strTeamBadge} width="100" />
            <p>{strTeam}</p>
          </div>  
        );
      })}
    </div>
  );
}

チームページ


次に、個々のチームページを作成します.
ページフォルダ内でteam フォルダと[name] サブフォルダとindex.js ファイル
|- pages
  |- team
    |- [name]
     - index.js
[name] 提供するdynamic route それで、URLを通してチーム名を渡すことができます./team/Brooklyn%20Netsインteam/[name]/index.js チーム名のAPIを検索するには、次の項目を追加します.
const endpoint = "https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=";
export async function getServerSideProps({ query }) {
  const { name } = query;
  const res = await fetch(`${endpoint}${name}`);
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}
ホームページと同様に、データを取得し、Aを作成してページに出力しますTeam() 機能
export default function Team({ data }) {
  console.log(data);
  const {
    strTeam,
    strStadium,
    strStadiumThumb,
    strFacebook,
    strInstagram,
    strTwitter,
  } = data.teams[0]; 
  return (
    <div className="team">
      <h1>{strTeam}</h1>
      <h3>Stadium</h3>
      <p>{strStadium}</p>
      <img src={strStadiumThumb} width="400" />
      <h3>Social</h3>
      <ul>
        <li><a href={strFacebook}>Facebook</a></li>
        <li><a href={strInstagram}>Instagram</a></li>
        <li><a href={strTwitter}>Twitter</a></li>
      </ul>
    </div>
  );
}
これは、このチュートリアルのための十分なデータが、あなたがconsole.log あなたが利用可能なデータの完全なセットが表示されます.

ホームページへのホームページのリンク


今、我々はホームページを個々のチームページにリンクするハイパーリンクを加える必要があります.
再オープンpages/index.js そして、次をインポートします.jsLink 最初の行に以下を追加します.
import Link from "next/link";
エディットreturn チーム名をクエリ文字列として使用してチームページにリンクするコンポーネントを含めるには、次の手順に従います.
return (
  <span key={idTeam}>
    <Link href="/team/[name]" as={`/team/${strTeam}`}>
      <a>
        <img src={strTeamBadge} width="100" />
        <p>{strTeam}</p>
      </a>
    </Link>
  </span>
);

スタイリングの追加


場所でデータを今すぐ私たちのウェブサイトにいくつかの基本的なCSSを与える.
アプリケーションは既に読み込み中ですglobal.css CSSを追加しましょう.
.teams {
  padding: 5%;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
}
これは、ホームページ上のチームのロゴの応答グリッドレイアウトを作成します.
個々のチームページでは、コンテンツを配置し、最大幅を制限します.
.team {
  max-width: 400px;
  margin: auto;
}
.team img {
  max-width: 100%;
  display: block;
}
.team ul {
  padding-left: 1rem;
}

タグの追加


現在<title> タグが存在しないので、次のインポートできます.jsHead コンポーネントの上部にindex.js :
import Head from "next/head";
を返します.<div> titleタグ付き:
...
<div className="teams">
      <Head>
        <title>NBA Teams</title>
      </Head>
      {teams.map((team) => {
...
これで、チームを選択し、それらについてのいくつかの基本的な情報を得ることができるウェブサイトがあります.
これらの追加からデータを読み込むことによってさらに拡張することができますSportsDB endpoints .

Vercelへの配備


だってね.JSは作成され、Vercelによって維持され、彼らは次の展開に簡単になります.JSアプリケーション.
無料アカウントの作成https://vercel.com/signup 次に次のコマンドを実行します.
npm i -g vercel
では、vercel コマンドとあなたのメールアドレスを確認するよう求められます.
一度実行ランvercel 再度、サイトを展開してVercelサブドメインにプロンプトに従ってください.
Vercelに配備される完成したウェブサイトは、ここにありますhttps://nbateams.vercel.app/ .
Wrapper class
TensorFlow v1.10/1.11(AMD GPU/ROCm版)