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

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

• Next.js
• Tailwindcss
• Twitter-lite

Getting Started

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

TWITTER_CONSUMER_KEY=
TWITTER_CONSUMER_KEY_SECRET=
TWITTER_BEARER_TOKEN=
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, secret and bearer token and add it to the .env.local file.

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

App vs. User authentication

Twitter has two different authentication options:

• App: higher rate limits. Great for building your own Twitter App.
• User: lower rate limits. Great for making requests on behalf of a User.

User authentication requires:

• consumer_key
• consumer_secret
• access_token_key
• access_token_secret

App authentication requires:

• bearer_token

For the example in this starter, we use App authentication which makes use of the bearer_token

Install dependencies

yarn install

Run the development server:

yarn dev

Open http://localhost:3000 with your browser to…

View on GitHub

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
• Twitter-lite
• 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=
TWITTER_BEARER_TOKEN=
TEST_TWITTER_HANDLE=

You can get the values of TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_KEY_SECRET & TWITTER_BEARER_TOKEN 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"
}

The response will be

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

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.