NextJS 웹사이트에 Instagram 사진을 추가하는 방법

8472 단어 reactinstagramnextjs
웹사이트(또는 고객의 웹사이트)에 Instagram 사진을 표시하면 웹앱에서 인스타그램 계정으로 또는 그 반대로 일부 트래픽을 퍼널할 수 있습니다. Instagram은 잠재 고객과 소통하고 온라인 브랜드를 구축할 수 있는 좋은 방법입니다.

이 게시물에서는 NextJS 웹앱에서 마지막 Instagram 게시물을 표시하는 방법에 대한 예를 보여드리겠습니다.

Next.JS 프로젝트 시작



코드를 시작하겠습니다. 먼저 NextJS 프로젝트를 초기화하겠습니다. 모든 것을 자동으로 설정하는 create-next-app 사용. 터미널을 열고 다음을 실행하십시오.

npx create-next-app
# or
yarn create next-app


설치가 완료되면 개발 모드에서 앱을 실행합니다. cd 폴더에 넣고 다음을 실행하기만 하면 됩니다.

yarn dev


그러면 http://localhost:3000에서 개발 서버가 시작되고 브라우저가 열립니다.



Instagram 웹 API 패키지 추가



Instagram Post를 가져오기 위해 npm 패키지instagram-web-api를 사용합니다. 패키지를 설치해야 합니다.

npm install instagram-web-api --save
# or
yarn add instagram-web-api


홈페이지 업데이트



기본적으로 Next.js는 모든 페이지를 사전 렌더링합니다. 즉, Next.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를 얻기 위해 정적 생성 페이지를 사용할 것입니다. HTML은 빌드 시 생성되며 각 요청에서 재사용됩니다.

빌드 시 데이터를 가져오려면 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
+    };
+}


Instagram에서 게시물을 가져오려면 3단계가 필요합니다.
  • Instagram 클라이언트 생성
  • 인스타그램 로그인
  • 사용자 이름으로 데이터를 가져옵니다.

    • 게시물을 소품으로 반환하기만 하면 Home React 구성 요소에서 게시물을 수신하고 렌더링할 수 있습니다.

    스타일 추가


    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%;
}


    결과





    추가 정보:


  • 레포:

  • NextJS

    • 질문?



    이 게시물이 마음에 들면 공유하여 저를 도와주시고 질문이 있으시면 Twitter(으)로 저에게 편지를 보내주세요.
    왜 Elasticsearch 검색이 실시간 검색이라고 해요?
    GitHub로 전송할 수 없음 "OAuth 응용 프로그램이 워크플로우 범위 없이 워크플로우를 만들거나 업데이트할 수 없음"

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage