Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/solygambas/next-batman
4 small projects to understand Next.js basics.
https://github.com/solygambas/next-batman
contentful javascript netlify-identity next nextjs react reactjs
Last synced: about 2 months ago
JSON representation
4 small projects to understand Next.js basics.
- Host: GitHub
- URL: https://github.com/solygambas/next-batman
- Owner: solygambas
- Created: 2019-10-15T13:19:26.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T05:48:40.000Z (almost 2 years ago)
- Last Synced: 2024-10-27T22:31:21.052Z (3 months ago)
- Topics: contentful, javascript, netlify-identity, next, nextjs, react, reactjs
- Language: JavaScript
- Homepage: https://next-blog-dagny.vercel.app/
- Size: 1.15 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js basics
4 small projects to understand Next.js basics.
| # | Project | Description |
| --- | ---------------------------- | ------------------------------------------------------------- |
| 01 | [**Batman App**](#batman) | A web app about Batman TV Shows to understand Next.js basics. |
| 02 | [**Blog App**](#blog) | A very simple blog app. |
| 03 | [**Game Vibes**](#gamevibes) | A quick project using Netlify Identity with Next.js. |
| 04 | [**Marmite**](#marmite) | A small recipe app combining Next.js with Contentful. |
A web app about Batman TV Shows to understand Next.js basics.
[See batman folder](batman)
### Demo
[See Demo deployed on Now](https://hello-next.solygambas.now.sh/)
### Features
- starting a Next.js project.
- navigating between pages with Link.
- using shared components for layout with props.children.
- creating dynamic pages with useRouter.
- creating clean URLs with dynamic routing.
- fetching data from TVmaze API with isomorphic-unfetch and getInitialProps.
- styling components with styled-jsx and react-markdown.
- deploying on ZEIT Now.
- exporting into a static HTML app.
A very simple blog app.
[See blog folder](blog)
### Demo
[See Demo deployed on Vercel](https://next-blog-dagny.vercel.app/)
### Features
- creating a Next.js app.
- navigating between pages with Link.
- creating a layout and handling metadata with Head.
- styling pages with CSS modules and global import via \_app.
- serving static assets like images with public folder.
- fetching markdown posts with gray-matter and getStaticProps.
- handling dynamic routes with getStaticPaths.
- rendering markdown with remark and remark-html.
- formatting dates with date-fns.
- creating an API route.
- deploying on Vercel.
Based on [Learn Next.js](https://nextjs.org/learn).
A quick project using Netlify Identity with Next.js.
[See game-vibes folder](game-vibes)
### Demo
[See Demo deployed on Netlify](https://gamevibes.netlify.app/)
(Email: [email protected] - Password: mariobros)
### Features
- installing Netlify Identity Widget and deploying on Netlify.
- creating an auth context with useContext.
- handling sign up, log in and log out.
- customizing the navbar for connected users.
- using Netlify Functions to protect content.
- enabling Google and GitHub as auth providers.
Based on [Next.js & Identity (auth) Tutorial](https://www.youtube.com/watch?v=IM7a6BxNof8&list=PL4cUxeGkcC9ig-veuRaLI4QB0Ws8xMzjv) by Shaun Pelling - The Net Ninja (2021).
A small recipe app combining Next.js with Contentful.
[See marmite folder](marmite)
### Demo
[See Demo deployed on Vercel](https://justaddmarmite.vercel.app/)
### Features
- building a content model and adding recipes on Contentful.
- configuring Contentful client in a Next.js project.
- outputting recipe data with getStaticProps.
- using images from Contentful with next.config.js.
- customizing the layout with styled JSX.
- generating paths for recipe details with getStaticPaths.
- rendering formatted content with Contentful rich text renderer.
- handling incremental static regeneration with revalidate.
- displaying a skeleton to handle server-side rendering on new recipes.
- building a custom 404 page and redirecting users.
- creating a Vercel deploy hook to trigger builds from Contentful.
- deploying to Vercel.
Based on [Next.js & Contentful Site Build Tutorial](https://www.youtube.com/watch?v=m9mNsYJbkNg&list=PL4cUxeGkcC9jClk8wl1yJcN3Zlrr8YSA1) by Shaun Pelling - The Net Ninja (2021).