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
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=
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_keyconsumer_secretaccess_token_keyaccess_token_secret
App authentication requires:
For the example in this starter, we use App authentication which makes use of the bearer_token
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β¦
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=
Enter fullscreen mode
Exit fullscreen mode
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"
}
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.
