How to Event Stream from Your Next.js App Using Open Source RudderStack
This post assumes you have already installed and set up your Next.js app. If you haven’t done so, we recommend following the official Next.js documentation to get started.
Creating a Source in RudderStack
2. Upon login, you should see the following dashboard:
3. Note the Data Plane URL. You will need this URL to integrate your Next.js app with RudderStack.
5. After assigning a name to your source, click on Next.
Integrate Your Next.js app with RudderStack
To integrate RudderStack with your Next.js app and set up the tracking code, follow these steps:
1. Create a new file in your app’s pages folder, as shown:
2. Add the following lines in your index.js file (present in your app’s pages folder), as shown:
Important: You can refer to our sample Next.js app present in our RudderStack Next.js repository for more information on modifying these files.
Step 2: Create a Tool Destination in RudderStack for Routing Your Next.js app Events
RudderStack currently supports more than 80 third-party tools and platforms to which you can reliably send your tracked events. For this tutorial, we will route the Next.js app events to Google Analytics. To configure Google Analytics as a destination in RudderStack, follow these steps:
1. In the left navigation bar of your dashboard, click on Destinations, followed by Add Destination. Since we have already configured a source, you can simply click on the source and choose the Add Destination option, as shown:
Note: If you have already configured a destination in RudderStackand want to send your event data to that platform, use the Connect Destinations option.
2. From the list of destinations, select Google Analytics.
3. Give a name to your destination and click on Next, as shown:
5. In the Connection Settings, configure your Google Analytics destination with your Google Analytics Tracking ID and other optional settings, as shown below. Then, click on Next.
6. You can also transform your events before sending them to Google Analytics. For more information on this feature, check out our docs.
7. That’s it! Google Analytics is now configured as a destination. You should now see the following source-destination connection in your dashboard:
(Alternate) Step 2: Create a Warehouse Destination in RudderStack for Your Next.js app Events
Important: Before you configure a data warehouse as a destination in RudderStack, you will need to set up a new project in your data warehouse. Also, you need to create a new RudderStack user role with the relevant permissions.
Follow our docs to get detailed, step-by-step instructions on how to do so for the data warehouse of your choice.
For this tutorial, we will set up a Google BigQuery warehouse destination to route all the events from our Next.js app. As mentioned above, you can set up a BigQuery project with the required permissions for the service account by following our doc.
Once you have set up the project and assigned the required user permissions, follow these steps:
1. From the list of destinations, select Google BigQuery:
2. Give a name to this destination. Then, click on Next.
4. Specify the Connection Credentials. Enter the BigQuery Project ID and the Staging Bucket Name. Follow these instructions to get this information.
5. Finally, copy the contents of the private JSON file. Find more information on how to do this in our doc.
That’s it! You have successfully set up BigQuery as a warehouse destination in RudderStack.
Step 3: Deploy Your Next.js app and Verify the Event Stream
To do this, follow these steps:
1. Navigate to the folder containing your Next.js app.
2. To deploy the app, run the command , as shown:
3. Open your app by going to the URL http://localhost:3000 on your browser. Refresh the page and click on various links to track different events:
Note: After deploying your app, there can sometimes be a lag before events start sending and are visible in your dashboard and destination. Don’t worry. All events are captured and sent; just be aware that they can take a few minutes to show up.
6. RudderStack has successfully tracked and captured the events, as seen below:
7. Now, let’s check if the events are sent to our Google Analytics destination. Go to your Google Analytics dashboard and navigate to the Realtime - Events option.
We see one active user on our Next.js app, and the track event is visible too. This means the event was tracked and delivered successfully. Similarly, you should also receive the event in your Google BigQuery warehouse.