Skip to content
This repository was archived by the owner on Jan 12, 2024. It is now read-only.

Commit a55696e

Browse files
oliveriosousaoliveriosousa
authored
feat: add example with nextjs (#5)
1 parent 55088f0 commit a55696e

File tree

14 files changed

+535
-0
lines changed

14 files changed

+535
-0
lines changed

‎examples/browser-nextjs/.eslintrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"extends": ["next", "next/core-web-vitals"],
3+
"root": true
4+
}

‎examples/browser-nextjs/.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎examples/browser-nextjs/README.md

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<p align="center">
2+
<a href="https://js.ipfs.io" title="JS IPFS">
3+
<img src="https://ipfs.io/ipfs/Qme6KJdKcp85TYbLxuLV7oQzMiLremD7HMoXLZEmgo6Rnh/js-ipfs-sticker.png" alt="IPFS in JavaScript logo" width="244" />
4+
</a>
5+
</p>
6+
7+
<h3 align="center"><b>IPFS Next App</b></h3>
8+
9+
<p align="center">
10+
<b><i>Using js-ipfs in a `create-next-app`</i></b>
11+
<br />
12+
<br />
13+
<img src="https://raw.githubusercontent.com/jlord/forkngo/gh-pages/badges/cobalt.png" width="200">
14+
<br>
15+
<a href="https://github.com/ipfs/js-ipfs/tree/master/docs">Explore the docs</a>
16+
·
17+
<a href="https://codesandbox.io/">View Demo</a>
18+
·
19+
<a href="https://github.com/ipfs/js-ipfs/issues">Report Bug</a>
20+
·
21+
<a href="https://github.com/ipfs/js-ipfs/issues">Request Feature</a>
22+
</p>
23+
24+
## Table of Contents
25+
26+
- [Table of Contents](#table-of-contents)
27+
- [About The Project](#about-the-project)
28+
- [Getting Started](#getting-started)
29+
- [Pre requisites](#pre-requisites)
30+
- [Installation and Running example](#installation-and-running-example)
31+
- [Available Scripts](#available-scripts)
32+
- [`npm start`](#npm-start)
33+
- [`npm run build`](#npm-run-build)
34+
- [Usage](#usage)
35+
- [Learn More](#learn-more)
36+
- [Deploy on Vercel](#deploy-on-vercel)
37+
- [Documentation](#documentation)
38+
- [Contributing](#contributing)
39+
- [Want to hack on IPFS?](#want-to-hack-on-ipfs)
40+
41+
## About The Project
42+
43+
- Read the [docs](https://github.com/ipfs/js-ipfs/tree/master/docs)
44+
- Look into other [examples](https://github.com/ipfs/js-ipfs/tree/master/examples) to learn how to spawn an IPFS node in Node.js and in the Browser
45+
- Consult the [Core API docs](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api) to see what you can do with an IPFS node
46+
- Visit https://dweb-primer.ipfs.io to learn about IPFS and the concepts that underpin it
47+
- Head over to https://proto.school to take interactive tutorials that cover core IPFS APIs
48+
- Check out https://docs.ipfs.io for tips, how-tos and more
49+
- See https://blog.ipfs.io for news and more
50+
- Need help? Please ask 'How do I?' questions on https://discuss.ipfs.io
51+
52+
## Getting Started
53+
54+
### Pre requisites
55+
56+
Make sure you have installed all of the following prerequisites on your development machine:
57+
58+
- Git - [Download & Install Git](https://git-scm.com/downloads). OSX and Linux machines typically have this already installed.
59+
- Node.js - [Download & Install Node.js](https://nodejs.org/en/download/) and the npm package manager.
60+
61+
### Installation and Running example
62+
63+
```console
64+
> npm install
65+
> npm start
66+
```
67+
68+
Now open your browser at `http://localhost:3000`
69+
70+
### Available Scripts
71+
72+
In the project directory, you can run:
73+
74+
#### `npm start`
75+
76+
Runs the app in the development mode.<br>
77+
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
78+
79+
The page will reload if you make edits.<br>
80+
You will also see any lint errors in the console.
81+
82+
#### `npm run build`
83+
84+
Builds the app for production to the `dist` folder.<br>
85+
It correctly bundles in production mode and optimizes the build for the best performance.
86+
87+
## Usage
88+
89+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) integrated with `js-ipfs`.
90+
91+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
92+
93+
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
94+
95+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
96+
97+
### Learn More
98+
99+
To learn more about Next.js, take a look at the following resources:
100+
101+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
102+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
103+
104+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
105+
106+
### Deploy on Vercel
107+
108+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
109+
110+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
111+
112+
_For more examples, please refer to the [Documentation](#documentation)_
113+
114+
## Documentation
115+
116+
- [Config](https://docs.ipfs.io/)
117+
- [Core API](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api)
118+
- [Examples](https://github.com/ipfs/js-ipfs/tree/master/examples)
119+
- [Development](https://github.com/ipfs/js-ipfs/blob/master/docs/DEVELOPMENT.md)
120+
121+
## Contributing
122+
123+
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
124+
125+
1. Fork the IPFS Project
126+
2. Create your Feature Branch (`git checkout -b feature/amazing-feature`)
127+
3. Commit your Changes (`git commit -a -m 'feat: add some amazing feature'`)
128+
4. Push to the Branch (`git push origin feature/amazing-feature`)
129+
5. Open a Pull Request
130+
131+
## Want to hack on IPFS?
132+
133+
[![](https://cdn.rawgit.com/jbenet/contribute-ipfs-gif/master/img/contribute.gif)](https://github.com/ipfs/community/blob/master/CONTRIBUTING.md)
134+
135+
The IPFS implementation in JavaScript needs your help! There are a few things you can do right now to help out:
136+
137+
Read the [Code of Conduct](https://github.com/ipfs/community/blob/master/code-of-conduct.md) and [JavaScript Contributing Guidelines](https://github.com/ipfs/community/blob/master/CONTRIBUTING_JS.md).
138+
139+
- **Check out existing issues** The [issue list](https://github.com/ipfs/js-ipfs/issues) has many that are marked as ['help wanted'](https://github.com/ipfs/js-ipfs/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22) or ['difficulty:easy'](https://github.com/ipfs/js-ipfs/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Adifficulty%3Aeasy) which make great starting points for development, many of which can be tackled with no prior IPFS knowledge
140+
- **Look at the [IPFS Roadmap](https://github.com/ipfs/roadmap)** This are the high priority items being worked on right now
141+
- **Perform code reviews** More eyes will help
142+
a. speed the project along
143+
b. ensure quality, and
144+
c. reduce possible future bugs.
145+
- **Add tests**. There can never be enough tests.
146+
- **Join the [Weekly Core Implementations Call](https://github.com/ipfs/team-mgmt/issues/992)** it's where everyone discusses what's going on with IPFS and what's next

‎examples/browser-nextjs/components/ipfs.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { useState, useEffect } from 'react'
2+
import Ipfs from 'ipfs'
3+
4+
const IpfsComponent = () => {
5+
const [id, setId] = useState(null);
6+
const [ipfs, setIpfs] = useState(null);
7+
const [version, setVersion] = useState(null);
8+
const [isOnline, setIsOnline] = useState(false);
9+
10+
useEffect(() => {
11+
const init = async () => {
12+
if (ipfs) return
13+
14+
const node = await Ipfs.create();
15+
16+
const nodeId = await node.id();
17+
const nodeVersion = await node.version();
18+
const nodeIsOnline = node.isOnline;
19+
20+
setIpfs(node);
21+
setId(nodeId.id);
22+
setVersion(nodeVersion.version);
23+
setIsOnline(nodeIsOnline);
24+
}
25+
26+
init()
27+
}, [ipfs]);
28+
29+
if (!ipfs) {
30+
return <h4>Connecting to IPFS...</h4>
31+
}
32+
33+
return (
34+
<div>
35+
<h4 data-test="id">ID: {id}</h4>
36+
<h4 data-test="version">Version: {version}</h4>
37+
<h4 data-test="status">Status: {isOnline ? 'Online' : 'Offline'}</h4>
38+
</div>
39+
)
40+
}
41+
42+
export default IpfsComponent

‎examples/browser-nextjs/next.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
reactStrictMode: true,
3+
// https://github.com/vercel/next.js/issues/21079
4+
// Remove the workaround the issue is fixed
5+
images: {
6+
loader: "imgix",
7+
path: "",
8+
},
9+
}

‎examples/browser-nextjs/package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "example-browser-nextjs",
3+
"version": "1.0.0",
4+
"private": true,
5+
"scripts": {
6+
"clean": "rimraf ./dist ./.next",
7+
"dev": "next dev",
8+
"build": "next build && next export -o dist",
9+
"serve": "npm run dev",
10+
"start": "next start",
11+
"lint": "next lint",
12+
"test:example": "npm run build && playwright test tests"
13+
},
14+
"dependencies": {
15+
"ipfs": "^0.55.4",
16+
"next": "11.0.1",
17+
"react": "17.0.2",
18+
"react-dom": "17.0.2"
19+
},
20+
"devDependencies": {
21+
"eslint": "7.30.0",
22+
"eslint-config-next": "11.0.1",
23+
"test-util-ipfs-example": "^1.0.0",
24+
"rimraf": "^3.0.2"
25+
}
26+
}

‎examples/browser-nextjs/pages/_app.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import '../styles/globals.css'
2+
3+
function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />
5+
}
6+
7+
export default MyApp

‎examples/browser-nextjs/pages/api/hello.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2+
3+
export default function handler(req, res) {
4+
res.status(200).json({ name: 'John Doe' })
5+
}

‎examples/browser-nextjs/pages/index.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import Head from 'next/head'
2+
import Image from 'next/image'
3+
import styles from '../styles/Home.module.css'
4+
5+
import IpfsComponent from '../components/ipfs'
6+
7+
export default function Home() {
8+
return (
9+
<div className={styles.container}>
10+
<Head>
11+
<title>Create Next App</title>
12+
<meta name="description" content="Generated by create next app" />
13+
<link rel="icon" href="/favicon.ico" />
14+
</Head>
15+
16+
<main className={styles.main}>
17+
<h1 className={styles.title}>
18+
Welcome to <a href="https://nextjs.org">Next.js!</a>
19+
</h1>
20+
21+
<p className={styles.description}>
22+
Get started by editing{' '}
23+
<code className={styles.code}>pages/index.js</code>
24+
</p>
25+
26+
<div className={styles.grid}>
27+
<a href="https://nextjs.org/docs" className={styles.card}>
28+
<h2>Documentation &rarr;</h2>
29+
<p>Find in-depth information about Next.js features and API.</p>
30+
</a>
31+
32+
<a href="https://nextjs.org/learn" className={styles.card}>
33+
<h2>Learn &rarr;</h2>
34+
<p>Learn about Next.js in an interactive course with quizzes!</p>
35+
</a>
36+
37+
<a
38+
href="https://github.com/vercel/next.js/tree/master/examples"
39+
className={styles.card}
40+
>
41+
<h2>Examples &rarr;</h2>
42+
<p>Discover and deploy boilerplate example Next.js projects.</p>
43+
</a>
44+
45+
<a
46+
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
47+
className={styles.card}
48+
>
49+
<h2>Deploy &rarr;</h2>
50+
<p>
51+
Instantly deploy your Next.js site to a public URL with Vercel.
52+
</p>
53+
</a>
54+
55+
<a
56+
href="https://docs.ipfs.io/"
57+
className={styles.card}
58+
>
59+
<h2>IPFS Documentation &rarr;</h2>
60+
<p>
61+
Learn how to build the future of the internet
62+
</p>
63+
</a>
64+
65+
<a
66+
href="https://proto.school/"
67+
className={styles.card}
68+
>
69+
<h2>IPFS Tutorials &rarr;</h2>
70+
<p>
71+
Interactive tutorials on decentralized web protocols
72+
</p>
73+
</a>
74+
</div>
75+
76+
<IpfsComponent></IpfsComponent>
77+
</main>
78+
79+
<footer className={styles.footer}>
80+
<a
81+
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
82+
target="_blank"
83+
rel="noopener noreferrer"
84+
>
85+
Powered by{' '}
86+
<span className={styles.logo}>
87+
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
88+
</span>
89+
</a>
90+
</footer>
91+
</div>
92+
)
93+
}

‎examples/browser-nextjs/public/favicon.ico

33.7 KB
Binary file not shown.

‎examples/browser-nextjs/public/vercel.svg

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)