https://github.com/ecrozatti/datafetching_nextjs

A simple project to demonstrate the differents forms to data fetching with Next.js: Client Side Fetching, Server Side Rendering and Static Site Generation.
https://github.com/ecrozatti/datafetching_nextjs

dynamicimport fakeserver jsonserver lazy-loading nextjs nodejs reactjs serverside-rendering staticsite styled-components

Last synced: 9 months ago
JSON representation

A simple project to demonstrate the differents forms to data fetching with Next.js: Client Side Fetching, Server Side Rendering and Static Site Generation.

• Host: GitHub
• URL: https://github.com/ecrozatti/datafetching_nextjs
• Owner: ecrozatti
• License: mit
• Created: 2021-06-27T01:41:09.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-07-12T02:07:30.000Z (over 4 years ago)
• Last Synced: 2025-02-06T22:42:18.529Z (11 months ago)
• Topics: dynamicimport, fakeserver, jsonserver, lazy-loading, nextjs, nodejs, reactjs, serverside-rendering, staticsite, styled-components
• Language: TypeScript
• Homepage:
• Size: 775 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


    





  About   |   

  Technologies   |   

  Requirements   |   

  Getting Started





    



## :page_with_curl: About

![GitHub language count](https://img.shields.io/github/languages/count/ecrozatti/DataFetching_NextJS)

![GitHub top language](https://img.shields.io/github/languages/top/ecrozatti/DataFetching_NextJS)

![GitHub repo size](https://img.shields.io/github/repo-size/ecrozatti/DataFetching_NextJS)

![GitHub](https://img.shields.io/github/license/ecrozatti/DataFetching_NextJS)

![GitHub last commit](https://img.shields.io/github/last-commit/ecrozatti/DataFetching_NextJS)

Simple project developed during the studies of the Next.js framework.

The project demonstrates different types of data fetching and dynamic import using Next.js. Additionally, there is a custom 404 error page.

See instructions on each page of the project.

## :computer: Technologies

Project developed with the following technologies:

- [ReactJS](https://reactjs.org/)

- [TypeScript](https://www.typescriptlang.org/)

- [Next.js](https://nextjs.org/)

- [JSON Server](https://github.com/typicode/json-server)

- [Styled Components](https://styled-components.com/)

- [Eslint](https://eslint.org/)

## :books: Requirements

- [**Git**](https://git-scm.com/) to clone the project.

## :rocket: Getting Started

``` bash

  # Clone the project:

  $ git clone https://github.com/ecrozatti/GoBarBer_Web.git

  # Navigate to the directory:

  $ cd DataFetching_NextJS

  

  # Install dependencies:

  $ yarn install

  

  # Run the fake server with 2 seconds delay:

  npx json-server server.json -p 3333 -w -d 2000

  # Build application:

  $ yarn build

  

  # Start application:

  $ yarn start

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

Made with 💚 by [Eric Crozatti Ferreira](https://www.linkedin.com/in/eric-crozatti-1447688a/)