DEV Community

Cover image for Build an app using Next.js and Twitter API
Dinesh S
Dinesh S

Posted on

Build an app using Next.js and Twitter API

In this post I am going to walk you through the Next.js Twitter starter template I have created. Using this guide, you can build your own app using Next.js and Twitter API.

Let's get started.

Clone the starter kit

GitHub logo Dineshs91 / nextjs-twitter-starter

A starter kit for building apps using Twitter API with Next.js

This is a Next.js Twitter starter kit.

Packages

Getting Started

Create .env.local file in the project root and add the following content in it

TWITTER_CONSUMER_KEY=
TWITTER_CONSUMER_KEY_SECRET=
TEST_TWITTER_HANDLE=

To get the Twitter keys, visit https://developer.twitter.com/en/portal/dashboard and create a standalone app. Fetch the consumer key and secret and add it to the .env.local file.

Add your twitter handle for TEST_TWITTER_HANDLE. This is used in the twitter sample page.

Install dependencies

yarn install
Enter fullscreen mode Exit fullscreen mode

Run the development server:

yarn dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

There is a sample API http://localhost:3000/api/twitter-user. This endpoint can be edited in pages/api/twitter-user.js.

Test the API from postman, by sending a post request with the request body

{
    "twitter_handle": "SDinesh91"
}

The response will be

{
    "screen_name": "SDinesh91"
    "name": "Dinesh"
    "profile_image_url":

First, clone the repository to your local computer.

git clone https://github.com/Dineshs91/nextjs-twitter-starter.git

This kit contains the following packages for you to get started.

  • Next
  • React
  • Twit
  • Tailwindcss

Install dependencies

cd into the newly cloned repository and run the following command.

yarn install

Note: If you don't have yarn installed, install it by following the instructions provided here https://classic.yarnpkg.com/lang/en/docs/install

Set up local configuration

Create a file to store the local environment variables.

Create a file in the root directory with the name .env.local and add the following in it.

TWITTER_CONSUMER_KEY=
TWITTER_CONSUMER_KEY_SECRET=
TEST_TWITTER_HANDLE=
Enter fullscreen mode Exit fullscreen mode

You can get the values of TWITTER_CONSUMER_KEY & TWITTER_CONSUMER_KEY_SECRET from Twitter developer portal.

Navigate to https://developer.twitter.com/en/portal/dashboard and create a new standalone app. Once you create the app, you will get the required values which you can add in the .env.local file.

TEST_TWITTER_HANDLE can be any Twitter handle. This key is used in the demo page to fetch their public profile information.

Local development

To start your local development server, run the following command

yarn dev

Once the server starts, navigate to http://localhost:3000/.

Checkout the demo page at http://localhost:3000/twitter. The information you see there, is pulled from Twitter using their official API.

Develop

The starter kit contains one example for both SSR and API.

It has one server side rendered (SSR) page and one api api/twitter-user.

  • SSR page pages/index.js
  • API pages/api/twitter-user.js

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Test the API from postman, by sending a post request with a request body in the below format.

{
    "twitter_handle": "SDinesh91"
}
Enter fullscreen mode Exit fullscreen mode

The response will be

{
    "screen_name": "SDinesh91",
    "name": "Dinesh",
    "profile_image_url": "https://pbs.twimg.com/profile_images/1421346630456922112/fVyiui9f_normal.jpg"
}
Enter fullscreen mode Exit fullscreen mode

Make sure the header Content-Type is set to application/json

Now, go ahead and try it out with your own twitter handle.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Checkout the example located at pages/twitter.js. You can navigate to http://localhost:3000/twitter in your browser to see it.

Hacking

That's it. You are all set to build your own app using Twitter API. Share your app with me on Twitter.

Deployment

The easiest way to deploy your app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

Authentication

If you would like to make requests on behalf of another user, you will need to generate a separate set of Access Tokens for that user using the 3-legged OAuth flow, and pass that user's tokens with your OAuth 1.0a User Context requests.

Check out next-auth.js for OAuth. This package is not included in the starter, you will have to add it manually.

Discussion (0)