Showing your Instagram Photos in your website (or your client's) allows your to funnel some traffic from your webapp to your Instagram Account and visa versa. Instagram is a great way to connect with your audience and build up your online brand.
In this post I will show you an example on how to show your last Instagram Posts in your NextJS webapp.
Start a Next.JS project
Let's start code, first let's initialize a NextJS project. Using create-next-app, which sets up everything automatically for you. Open your Terminal and run:
npx create-next-app
# or
yarn create next-app
After the installation is complete, run the app in development mode. Just need to cd into the folder and run:
yarn dev
This will start your development server in http://localhost:3000, open the browser:
Add Instagram Web API Package
To fetch the Instagram Post we are going to use the an npm package named: instagram-web-api. We need to install the package:
npm install instagram-web-api --save
# or
yarn add instagram-web-api
Updaye your home page
By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript.
Open the file pages/index.js and replace all the code with:
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>
);
}
Now your page should look like this:
Fetching and rendering Instagram Posts
To obtain better performance and SEO we are going to use Static Generated Pages: The HTML is generated at build time and will be reused on each request.
To fetch data at build time we need to export a function getStaticProps in our 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
+ };
+}
To fetch the post from Instagram we have need 3 steps:
- Create the Instagram client
- Login to Instagram
- Fetch the data by username.
After we just need to return the posts as props and we receive them in the Home React component and we jusr render it.
Add Styles
Edit your styles/Home.module.css and the following code:
.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%;
}
Result
More information:
Questions?
If you liked this post help me by sharing it and if you have any questions you can write to me on Twitter at @fmontes.
Top comments (0)