Build an app using Next.js and Twitter API
Published: 2021-12-03 06:46:16

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 Dineshs91/nextjs-twitter-starter %}

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](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/](http://localhost:3000/). 

Checkout the demo page at  [http://localhost:3000/twitter](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](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](https://twitter.com/SDinesh91).

### Deployment

The easiest way to deploy your app is to use the [Vercel](https://vercel.com/) Platform from the creators of Next.js.

Check out Next.js [deployment documentation](https://nextjs.org/docs/deployment) 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](https://next-auth.js.org/getting-started/introduction) for OAuth. This package is not included in the starter, you will have to add it manually.