- Published on
OMDB API NextJS
- Authors
- Name
- interglobalmedia
- @letsbsocial1
Building a Next.js Serverless Application for the OMDB API (Formerly Building a Node.js Back End Server for the OMDB API)
Description
An app which formerly implemented the OMDB API Using Nodejs, still protects your API key, and deployed to Heroku. It used the Got HTTP library, which replaced the deprecated Request library, and which supports async/await (among other things!). It also includes stacktrace error handling in development, invalid movie search keywords in production, and setting the required boolean attribute on the search input field for empty submission handling in production, as well as animated scroll down and scroll up buttons on the y axis.
Project Formerly Included
async await, css animation, dotenv, ejs, ejs lint, eslint, express, got, heroku, local scripts, modern javascript, nodejs, node modules, nodemon, node sass, omdb api, pagination, required boolean attribute, scss, scroll down button, scroll up button
Updated Description
I recently stopped using Heroku because it had been attacked by hackers too many times over the course of the COVID pandemic. Salesforce took over Heroku in 2010, but I did not even hear of the acquisition until much later. Suffice it to say, the workflow one uses on Heroku, which has not really changed in years, is somewhat outdated (AND expensive), and the load time for apps can sometimes take a while. I already was having this issue with my GatsbyJS projects (which I no longer use), and was looking for a framework that would still be built on React AND Node.js, but also (perhaps) be "serverless". Next.js fit all the criteria. AND, the best thing is the speed with which Next.js applications are deployed to vercel.com (the creators of Next.js).
Next.js routing is file based, which is really awesome, but I must admit, even though I had already been introduced to the concept with GatsebyJS, I am still wrapping my head around that concept. Especially when I had to refactor a traditional Node.js/Express.js/EJS project into a Next.js project! But I do like it and am building a lot of apps right now with it so that I can truly understand and master it. I love functional React, and Next.js is all about that and hooks too. One can also build full stack applications with it using databases. Right now I am building a couple of apps which use MongoDB and the MongoDB Atlas Cloud.
It was interesting, fun, and a bit challenging to refactor this project, espeacailly because I chose to stay with the purely query based approach to getting data from the OMDB API. This meant being able to get all movies associated with a particular (search) query, instead of simply getting one movie title at a time, as I had initially started with on the client side.
To view and read about that project here, please visit the OMDB API JS App post.
By all appearances and functionality, there is no change between the former implementation of this application. it just was built and coded somewhat differently! It still has the same kind of error handling in production, same kind of scroll up and scroll buttons, and the same conditional, dynamic styling on pointerdown for the submit buttons on both the home (/) and results (/results) page. Search on both pages and pagination on the results page works the same as well.
Project Now Includes
async-await, css animation, custom next.js _error.js page, dotenv, environment variables, eslint, fetch api, husky, invalid search keywords error handling production, lint-staged, local scripts, modern javascript, next.js, next/router hooks, node.js, node modules, omdb api, pagination, prettier, react hooks, required boolean attribute, sass, scss, scroll-down button, scroll-up button, server side rendering, stacktrace error-handing development, stylelint, vercel.com