California Destinations is a Next.js web app - this repository contains its source code
View the deployed app»
Table of Contents
This little project is a demo tourist website where user can choose a hotel from the list of hotels:
A list of dummy hotels is fetched from JSONPlaceholder APIs:
It explores many Next.js features like how to make pages and routes, how to link between them, how to use styles, how to create a Layout component used across all app like Navbar or Footer, how to use static assests like images, how to insert different metadata to each page, how to fetch data on the server side (from JSONPlaceholder APIs) with Next.js build in functions: getStaticProps() and getStaticPaths() and finally how to deploy the app on the Vercel Platform.
- HTML, CSS
- Next.js
- Github as a remote repository
- Chrome, Firefox, Brave Browser, Edge and Opera for browser testing the responsiveness.
- Chrome Developer Tools for testing screen sizes and using Lighthouse.
- Visual Studio Code as a local IDE & repository.
- this project was completed at the end of The Net Ninja tutorial see more
to run the Next app server: npm run dev or yarn dev. This app is deployed on Vercel: https://react-next-js-webb-app.vercel.app/.
Next.js is an open-source web development framework built on top of Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites as oppose to 'traditional' React apps that can only render their content in the client-side browser.
For any static assets like images in Next.js they have to placed in 'public' folder. Then we could use img src="public/kkkk" or import Image from 'next/image' and use that component that allows us direct styling - another good thing about using this Image component is that it loads images lazely, so for example if the image was somewhere at the bottom of the page it only loads it if we sroll down to the bottom; see index.js for its aplication
we can add meta data for each page: I will use the Head component thaht is built into next; import Head from 'next/head'
<title>California Holidays | About</title> now it the head when we on about page we will see 'California Holidays | About'; With another component we need to use React.Fragment since there can only be one element rendered in React, for that in Next.js we only need: <> mutiple elementsFor fetching data I am keeping it very simple and are using JSONPlaceholder APIs where I can choose different resoures like /comments, /photos, /users and so one. I am going to be using /photos resource. When using React 0nly for fetching data i would use useEffect Hook but because with Next I am not fetching data in the browser but on the server, for that I am using special function provided by Next getStaticProps() and getStaticPaths().
for dyanmic routing in Next I need to use [] when naming the file: [id].js
The easiest way to deploy Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out Next.js deployment documentation for more details. This app is deployed on Vercel: https://react-next-js-webb-app.vercel.app/