Create a NASA Image Gallery - NextJS getStaticProps/Paths Crash Course

Create a NASA Image Gallery - NextJS getStaticProps/Paths Crash Course

Create a NASA Image Gallery - NextJS getStaticProps/Paths Crash Course. In this video we are going to create a Static website that uses the NASA API, we will use getStaticProps, getStaticPaths and Client fetching.

In this video we are going to create a Static website that uses the NASA API, we will use getStaticProps, getStaticPaths and Client fetching. Test it for yourself at https://next-images-with-nasa.vercel.app/

NASA API: https://api.nasa.gov/ Next Image: https://nextjs.org/docs/api-reference/next/image Next Link : https://nextjs.org/docs/api-reference/next/link GitHub : https://github.com/perkinsjr/next-images-with-nasa

  • 00:00 - Introduction
  • 00:45 - NASA API
  • 07:05 - NextJS application setup
  • 08:11 - Next Config
  • 10:27 - Creating our framework for ImagePreview Component
  • 12:07 - Creating our framework for our Photo Image Paths.
  • 13:40 - Finish our ImagePreview Component
  • 17:13 - Creating our Homepage with getStaticProps
  • 24:09 - Referencing the NASA API to explain our code.
  • 25:19 - Testing our Image gallery
  • 26:31 - Writing our photos/[id].js
  • 27:37 - getStaticPaths
  • 29:37 - getStaticProps
  • 32:17 - Consuming our props
  • 35:31 - Testing our selected Photo
  • 36:30 - Using Grid to display the gallery
  • 38:35 - Testing our Grid
  • 39:34 - Creating a Fade in effect
  • 41:48 - Creating the ability to Search
  • 48:04 - Testing our search
  • 48:54 - More Stylings
  • 51:55 - Outro

nextjs next javascript react

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Building Isomorphic JavaScript Apps Faster with NextJS

Learn how to building Isomorphic JavaScript Apps faster with NextJS. Isomorphic apps are those which runs both on client and server. Next.js is the framework for developing server-side rendered react applications. Next.js makes app development simpler than building with React and Node. We will see that we can achieve automatic code splitting + HMR + SSR with completely no configuration which can help saving our development time a lot and makes our app simple to maintain.

Tendencias Javascript y Web 2020. React, Next.js, Deno

Tendencias Javascript y Web 2020. React, Next.js, Deno. En este video te voy a mencionar algunas herramientas y frameworks que fueron, seguirán siendo o van a ser tendencia en este 2020. Entre ellas están React, Next.js, Deno, los Headless CMS como Strapi, entre otros.

5 Reasons I Use Next.js Over Plain React

Next vs React is a popular topic and for good reason. Next can be seen as React with bells and whistles. Next.js features let us create apps and sites faster vs React. Next.js is a production ready React framework that comes with niceties out of the box. Next has features like routing, code splitting, image optimization, and static site generation that makes our lives as developers easier.

Nextjs Portafolio Simple | Ejemplo Práctico de Next.js

En este ejemplo práctico de Nextjs aprenderemos a crear una aplicación simple que nos podrá servir como portafolio para mostrar nuestros trabajos de desarrollo web y también para practicar también conceptos de HTML, CSS, Javascript, React, Bootstrap, y sobre todo Next.js.