https://github.com/reachvivek/instagram-ui-with-nextjs

A Clean and Modern UI to WebApp of Instagram by Facebook.
https://github.com/reachvivek/instagram-ui-with-nextjs

Last synced: about 1 month ago
JSON representation

A Clean and Modern UI to WebApp of Instagram by Facebook.

• Host: GitHub
• URL: https://github.com/reachvivek/instagram-ui-with-nextjs
• Owner: reachvivek
• License: agpl-3.0
• Created: 2020-08-29T14:49:49.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-29T16:03:38.000Z (over 4 years ago)
• Last Synced: 2024-11-18T14:36:58.745Z (3 months ago)
• Language: JavaScript
• Homepage: https://instagram-clone-next-js-app.vercel.app
• Size: 49.5 MB
• Stars: 3
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `Instagram UI with Next.JS`

![Instagram Clone UI](https://github.com/reachvivek/Instagram-Clone-NextJs-App/blob/master/instaclone.gif)

This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components).

For this purpose we are extending the `` and injecting the server side rendered styles into the ``, and also adding the `babel-plugin-styled-components` (which is required for server side rendering). Additionally we set up a global [theme](https://www.styled-components.com/docs/advanced#theming) for styled-components using NextJS custom [``](https://nextjs.org/docs#custom-app) component.

## Get Started

Clone the repository to the desired location on your device:

```bash

git clone https://github.com/reachvivek/Instagram-Clone-NextJs-App

```

Install it and run:

```bash

npm install

npm run dev

# or

yarn

yarn dev

```

Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

## Contribute

You're welcome to Fork this project and send in a Pull Request. 

## Happy Coding :)