React Next.js SSR and AlanAI | Podcast Search Netlify App Tutorial

React Next.js Podcast Search — Demo


You can learn this

Software used for this application

Initialize an app with create-next-app.

Sign up for an account at Alan Studio.

Create a new project and get alan ai api key.

Set up voice commands.

//pages/index.jsimport Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useEffect } from 'react'
const alanKey = 'your-key-here'
export default function Home() {

useEffect(() => {
const alanBtn = require('@alan-ai/alan-sdk-web');
key: alanKey,
onCommand: () => {}
}, [])

return (
<div className={styles.container}>
<link rel="icon" href="/favicon.ico" />
<main className={styles.main}>
<h1 className={styles.title}>
<p className={styles.description}>
<div className={styles.grid}>
<footer className={styles.footer}>
Created by Ian Poston 2021

Create account at

Create a command that sends an API request.

//alan studio projectintent('What is this?', reply('This is a react AI project.'));const API_KEY = 'PodcastIndex apiKey';
const SECRET = 'PodcastIndex secret';
//Podcasts by source
intent('Give me podcasts from $(source* (.+))', (p) => {

if(p.source.value) {
PODCAST_API_URL = `${PODCAST_API_URL}${p.source.value.toLowerCase().split(" ").join('-')}`{url: PODCAST_API_URL, key: API_KEY, secret: SECRET})

List podcast data in ui.

Deploy to Netlify.


New Features

Front-end Developer. “Lighten up Francis”

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store