Instagram写真をNextJSウェブサイトに加える方法

8289 ワード
react instagram nextjs テキストリンク
あなたのウェブサイト(またはあなたのクライアントのもの)であなたのInstagram写真を示すことは、あなたのウェブアプリからあなたのInstagramアカウントとVisa Versaに若干のトラフィックを漏らすことができます.Instagramは、あなたの観衆とつながって、あなたのオンラインブランドを構築するすばらしい方法です.
このポストでは、あなたのNextJS WebAppのあなたの最後のInstagramポストを示す方法の例をあなたに示します.

次へ。JSプロジェクト


まず、コードを開始しましょう.最初に、nextjsプロジェクトを初期化しましょう.使用create-next-app , これは自動的にすべてを設定します.端末を開き実行する
npx create-next-app
# or
yarn create next-app
インストールが完了したら、開発モードでアプリケーションを実行します.ジャストニードトゥcd フォルダに実行します.
yarn dev
これで、開発サーバが起動しますhttp://localhost:3000 , ブラウザを開きます

InstagramウェブAPIパッケージを加えてください


Instagramのポストを取得するには、NPMパッケージを使います.instagram-web-api . パッケージをインストールする必要があります.
npm install instagram-web-api --save
# or
yarn add instagram-web-api

Updayeあなたのホームページ


デフォルトでは、次へ.JS事前にすべてのページをレンダリングします.これは次のことを意味します.JSはクライアント側のJavaScriptによって行われるのではなく、事前に各ページのHTMLを生成します.
ファイルを開くpages/index.js を返します.
import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
    return (
        <div className={styles.container}>
            <Head>
                <title>Instagram Posts</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <h1>Instagram Posts</h1>
        </div>
    );
}
ページは次のようになります.

Instagram投稿の取得とレンダリング


より良いパフォーマンスとSEOを得るために、私たちは静的に生成されたページを使用するつもりです.
ビルド時にデータを取得するには、関数をエクスポートする必要がありますgetStaticProps 我々の中でpages/index.js
 import Head from 'next/head';
 import styles from '../styles/Home.module.css';
+import Instagram from 'instagram-web-api';

-export default function Home() {
+export default function Home({ posts }) {
     return (
         <div className={styles.container}>
             <Head>
@@ -10,6 +11,31 @@ export default function Home() {
             </Head>

             <h1>Instagram Posts</h1>
+            <ul className={styles.list}>
+                {posts.map(({ node }, i) => {
+                    return (
+                        <li key={i}>
+                            <img src={node.display_resources[0].src} />
+                            <p>{node.edge_media_to_caption.edges[0]?.node.text}</p>
+                        </li>
+                    );
+                })}
+            </ul>
         </div>
     );
 }
+
+export async function getStaticProps(context) {
+    const client = new Instagram({ username: 'INSTAGRAM_USERNAME', password: 'INSTAGRAM_PASSWORD' });
+    await client.login();
+
+    const response = await client.getPhotosByUsername({
+        username: 'INSTAGRAM_USERNAME',
+    });
+
+    return {
+        props: {
+            posts: response.user.edge_owner_to_timeline_media.edges,
+        }, // will be passed to the page component as props
+    };
+}
Instramからポストを取得するには、次の3つの手順が必要です.
  • クライアントを作成する
  • Instagramへのログイン
  • データをユーザー名で取得します.
    • 我々はちょうど柱としてポストを返す必要があると我々はHome 反応成分と我々はそれをレンダリングします.

    スタイルを加える


    エディットstyles/Home.module.css 以下のコード
    .container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list li {
    margin-bottom: 4rem;
    border-bottom: solid 1px lightgray;
    padding-bottom: 2.5rem;
}

.list img {
    max-width: 100%;
}

    結果



    詳細情報:

  • Repo:

  • NextJS

    • 質問？


    あなたがこのポストが好きであるならば、それを共有することによって私を助けてください、そして、あなたが質問をするならば、あなたはTwitterで私に手紙を書くことができます.
    2014.08.05 Unity5機能紹介セミナーのメモ
    [プログラマー]通報結果を得る