spatulatom/react-next-california-destinations

California Destinations is a Next.js web app - this repository contains its source code

View the deployed app»

Table of Contents

1. About The Project
2. Built With
3. Acknowledgments
4. Getting Started
5. Next.js General Info
6. Images
7. Customizing Page Title For Each Page
8. Fetching Data
9. Dynamic Routes
10. Deploy on Vercel

About The Project

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.

(back to top)

Built With

• 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.

(back to top)

Acknowledgments

• this project was completed at the end of The Net Ninja tutorial see more

(back to top)

Getting Started

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/.

(back to top)

Next general info

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.

(back to top)

Images usage

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

(back to top)

Customizing page title for each page

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 elements

(back to top)

Fetching Data

For 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().

(back to top)

Dynamic Routes

for dyanmic routing in Next I need to use [] when naming the file: [id].js

(back to top)

Deploy on Vercel

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/

(back to top)