├── .eslintrc
├── public
    ├── favicon.ico
    └── vercel.svg
├── pages
    ├── _app.js
    ├── api
    │   └── hello.js
    └── index.js
├── next.config.js
├── .github
    ├── workflows
    │   ├── stale.yml
    │   ├── generated-pr.yml
    │   └── sync.yml
    └── pull_request_template.md
├── styles
    ├── globals.css
    └── Home.module.css
├── .gitignore
├── package.json
├── tests
    └── test.js
├── components
    └── ipfs.js
└── README.md


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next", "next/core-web-vitals"],
3 |   "root": true
4 | }
5 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ipfs-examples/js-ipfs-browser-nextjs/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | 
3 | function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 
7 | export default MyApp
8 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
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 | }
6 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 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: "https://noop/",
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.github/workflows/stale.yml:
--------------------------------------------------------------------------------
 1 | name: Close Stale Issues
 2 | 
 3 | on:
 4 |   schedule:
 5 |     - cron: '0 0 * * *'
 6 |   workflow_dispatch:
 7 | 
 8 | permissions:
 9 |   issues: write
10 |   pull-requests: write
11 | 
12 | jobs:
13 |   stale:
14 |     uses: ipdxco/unified-github-workflows/.github/workflows/reusable-stale-issue.yml@v1
15 | 


--------------------------------------------------------------------------------
/.github/workflows/generated-pr.yml:
--------------------------------------------------------------------------------
 1 | name: Close Generated PRs
 2 | 
 3 | on:
 4 |   schedule:
 5 |     - cron: '0 0 * * *'
 6 |   workflow_dispatch:
 7 | 
 8 | permissions:
 9 |   issues: write
10 |   pull-requests: write
11 | 
12 | jobs:
13 |   stale:
14 |     uses: ipdxco/unified-github-workflows/.github/workflows/reusable-generated-pr.yml@v1
15 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 6 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 | }
 8 | 
 9 | a {
10 |   color: inherit;
11 |   text-decoration: none;
12 | }
13 | 
14 | * {
15 |   box-sizing: border-box;
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 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
35 | 


--------------------------------------------------------------------------------
/.github/workflows/sync.yml:
--------------------------------------------------------------------------------
 1 | name: Sync
 2 | on:
 3 |   workflow_dispatch:
 4 |   schedule:
 5 |     - cron: "0 0 * * *"
 6 | 
 7 | jobs:
 8 |   sync:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@v2
12 |       - name: Pull from another repository
13 |         uses: ipfs-examples/actions-pull-directory-from-repo@main
14 |         with:
15 |           source-repo: "ipfs-examples/js-ipfs-examples"
16 |           source-folder-path: "examples/browser-nextjs"
17 |           source-branch: "master"
18 |           target-branch: "main"
19 |           git-username: github-actions
20 |           git-email: github-actions@github.com
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example-browser-nextjs",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "clean": "rimraf ./dist ./.next",
 8 |     "dev": "next dev",
 9 |     "build": "next build && next export -o dist",
10 |     "serve": "npm run dev",
11 |     "start": "next start",
12 |     "lint": "next lint",
13 |     "test": "npm run build && playwright test tests"
14 |   },
15 |   "dependencies": {
16 |     "ipfs-core": "^0.16.0",
17 |     "next": "^12.0.7",
18 |     "react": "^17.0.2",
19 |     "react-dom": "^17.0.2"
20 |   },
21 |   "devDependencies": {
22 |     "@playwright/test": "^1.12.3",
23 |     "eslint": "^8.7.0",
24 |     "eslint-config-next": "^12.0.9",
25 |     "playwright": "^1.12.3",
26 |     "rimraf": "^3.0.2",
27 |     "test-util-ipfs-example": "^1.0.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/tests/test.js:
--------------------------------------------------------------------------------
 1 | import { test, expect } from '@playwright/test';
 2 | import { playwright } from 'test-util-ipfs-example';
 3 | 
 4 | // Setup
 5 | const play = test.extend({
 6 |   ...playwright.servers(),
 7 | });
 8 | 
 9 | play.describe('integrate ipfs with nextjs:', () => {
10 |   // DOM
11 |   const id = "[data-test=id]"
12 |   const version = "[data-test=version]"
13 |   const status = "[data-test=status]"
14 | 
15 |   play.beforeEach(async ({servers, page}) => {
16 |     await page.goto(`http://localhost:${servers[0].port}/`);
17 |   })
18 | 
19 |   play('should properly initialized a IPFS node and print some properties', async ({ page }) => {
20 |     await page.waitForSelector(id)
21 | 
22 |     expect(await page.isVisible(id)).toBeTruthy();
23 |     expect(await page.isVisible(version)).toBeTruthy();
24 |     expect(await page.textContent(status)).toContain('Online');
25 |   });
26 | });
27 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | **IMPORTANT: Please do not create a Pull Request for this repository.**
 2 | 
 3 | The contents of this repository are automatically synced from the parent [IPFS Examples Project](https://github.com/ipfs-examples/js-ipfs-examples) so any changes made to the standalone repository will be lost after the next sync.
 4 | 
 5 | Please open a PR against [IPFS Examples](https://github.com/ipfs-examples/js-ipfs-examples) instead.
 6 | 
 7 | ## Contributing
 8 | 
 9 | 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**.
10 | 
11 | 1. Fork the [IPFS Examples Project](https://github.com/ipfs-examples/js-ipfs-examples)
12 | 2. Create your Feature Branch (`git checkout -b feature/amazing-example`)
13 | 3. Commit your Changes (`git commit -a -m 'feat: add some amazing example'`)
14 | 4. Push to the Branch (`git push origin feature/amazing-example`)
15 | 5. Open a Pull Request
16 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/components/ipfs.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import { create } from 'ipfs-core'
 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 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 || !id) {
30 |     return <h4>Connecting to IPFS...</h4>
31 |   }
32 | 
33 |   return (
34 |     <div>
35 |       <h4 data-test="id">ID: {id.toString()}</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
43 | 


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   min-height: 100vh;
  3 |   padding: 0 0.5rem;
  4 |   display: flex;
  5 |   flex-direction: column;
  6 |   justify-content: center;
  7 |   align-items: center;
  8 |   height: 100vh;
  9 | }
 10 | 
 11 | .main {
 12 |   padding: 5rem 0;
 13 |   flex: 1;
 14 |   display: flex;
 15 |   flex-direction: column;
 16 |   justify-content: center;
 17 |   align-items: center;
 18 | }
 19 | 
 20 | .footer {
 21 |   width: 100%;
 22 |   height: 100px;
 23 |   border-top: 1px solid #eaeaea;
 24 |   display: flex;
 25 |   justify-content: center;
 26 |   align-items: center;
 27 | }
 28 | 
 29 | .footer a {
 30 |   display: flex;
 31 |   justify-content: center;
 32 |   align-items: center;
 33 |   flex-grow: 1;
 34 | }
 35 | 
 36 | .title a {
 37 |   color: #0070f3;
 38 |   text-decoration: none;
 39 | }
 40 | 
 41 | .title a:hover,
 42 | .title a:focus,
 43 | .title a:active {
 44 |   text-decoration: underline;
 45 | }
 46 | 
 47 | .title {
 48 |   margin: 0;
 49 |   line-height: 1.15;
 50 |   font-size: 4rem;
 51 | }
 52 | 
 53 | .title,
 54 | .description {
 55 |   text-align: center;
 56 | }
 57 | 
 58 | .description {
 59 |   line-height: 1.5;
 60 |   font-size: 1.5rem;
 61 | }
 62 | 
 63 | .code {
 64 |   background: #fafafa;
 65 |   border-radius: 5px;
 66 |   padding: 0.75rem;
 67 |   font-size: 1.1rem;
 68 |   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 69 |     Bitstream Vera Sans Mono, Courier New, monospace;
 70 | }
 71 | 
 72 | .grid {
 73 |   display: flex;
 74 |   align-items: center;
 75 |   justify-content: center;
 76 |   flex-wrap: wrap;
 77 |   max-width: 800px;
 78 |   margin-top: 3rem;
 79 | }
 80 | 
 81 | .card {
 82 |   margin: 1rem;
 83 |   padding: 1.5rem;
 84 |   text-align: left;
 85 |   color: inherit;
 86 |   text-decoration: none;
 87 |   border: 1px solid #eaeaea;
 88 |   border-radius: 10px;
 89 |   transition: color 0.15s ease, border-color 0.15s ease;
 90 |   width: 45%;
 91 | }
 92 | 
 93 | .card:hover,
 94 | .card:focus,
 95 | .card:active {
 96 |   color: #0070f3;
 97 |   border-color: #0070f3;
 98 | }
 99 | 
100 | .card h2 {
101 |   margin: 0 0 1rem 0;
102 |   font-size: 1.5rem;
103 | }
104 | 
105 | .card p {
106 |   margin: 0;
107 |   font-size: 1.25rem;
108 |   line-height: 1.5;
109 | }
110 | 
111 | .logo {
112 |   height: 1em;
113 |   margin-left: 0.5rem;
114 | }
115 | 
116 | @media (max-width: 600px) {
117 |   .grid {
118 |     width: 100%;
119 |     flex-direction: column;
120 |   }
121 | }
122 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 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 | }
94 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  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 | - [References](#references)
 38 | - [Documentation](#documentation)
 39 | - [Contributing](#contributing)
 40 | - [Want to hack on IPFS?](#want-to-hack-on-ipfs)
 41 | 
 42 | ## About The Project
 43 | 
 44 | - Read the [docs](https://github.com/ipfs/js-ipfs/tree/master/docs)
 45 | - Look into other [examples](https://github.com/ipfs-examples/js-ipfs-examples) to learn how to spawn an IPFS node in Node.js and in the Browser
 46 | - 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
 47 | - Visit https://dweb-primer.ipfs.io to learn about IPFS and the concepts that underpin it
 48 | - Head over to https://proto.school to take interactive tutorials that cover core IPFS APIs
 49 | - Check out https://docs.ipfs.io for tips, how-tos and more
 50 | - See https://blog.ipfs.io for news and more
 51 | - Need help? Please ask 'How do I?' questions on https://discuss.ipfs.io
 52 | 
 53 | ## Getting Started
 54 | 
 55 | ### Pre requisites
 56 | 
 57 | Make sure you have installed all of the following prerequisites on your development machine:
 58 | 
 59 | - Git - [Download & Install Git](https://git-scm.com/downloads). OSX and Linux machines typically have this already installed.
 60 | - Node.js - [Download & Install Node.js](https://nodejs.org/en/download/) and the npm package manager.
 61 | 
 62 | ### Installation and Running example
 63 | 
 64 | ```console
 65 | > npm install
 66 | > npm start
 67 | ```
 68 | 
 69 | Now open your browser at `http://localhost:3000`
 70 | 
 71 | ### Available Scripts
 72 | 
 73 | In the project directory, you can run:
 74 | 
 75 | #### `npm start`
 76 | 
 77 | Runs the app in the development mode.<br>
 78 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 79 | 
 80 | The page will reload if you make edits.<br>
 81 | You will also see any lint errors in the console.
 82 | 
 83 | #### `npm run build`
 84 | 
 85 | Builds the app for production to the `dist` folder.<br>
 86 | It correctly bundles in production mode and optimizes the build for the best performance.
 87 | 
 88 | ## Usage
 89 | 
 90 | 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`.
 91 | 
 92 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
 93 | 
 94 | [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`.
 95 | 
 96 | 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.
 97 | 
 98 | ### Learn More
 99 | 
100 | To learn more about Next.js, take a look at the following resources:
101 | 
102 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
103 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
104 | 
105 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
106 | 
107 | ### Deploy on Vercel
108 | 
109 | 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.
110 | 
111 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
112 | 
113 | _For more examples, please refer to the [Documentation](#documentation)_
114 | 
115 | ## References
116 | 
117 | - Documentation:
118 |   - [IPFS CONFIG](https://github.com/ipfs/js-ipfs/blob/master/docs/CONFIG.md)
119 |   - [MISCELLANEOUS](https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/MISCELLANEOUS.md)
120 |   - [FILES](https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/FILES.md)
121 | - Tutorials:
122 |   - [MFS API](https://proto.school/mutable-file-system)
123 |   - [Regular File API](https://proto.school/regular-files-api)
124 | 
125 | ## Documentation
126 | 
127 | - [Config](https://docs.ipfs.io/)
128 | - [Core API](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api)
129 | - [Examples](https://github.com/ipfs-examples/js-ipfs-examples)
130 | - [Development](https://github.com/ipfs/js-ipfs/blob/master/docs/DEVELOPMENT.md)
131 | - [Tutorials](https://proto.school)
132 | 
133 | ## Contributing
134 | 
135 | 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**.
136 | 
137 | 1. Fork the IPFS Project
138 | 2. Create your Feature Branch (`git checkout -b feature/amazing-feature`)
139 | 3. Commit your Changes (`git commit -a -m 'feat: add some amazing feature'`)
140 | 4. Push to the Branch (`git push origin feature/amazing-feature`)
141 | 5. Open a Pull Request
142 | 
143 | ## Want to hack on IPFS?
144 | 
145 | [![](https://cdn.rawgit.com/jbenet/contribute-ipfs-gif/master/img/contribute.gif)](https://github.com/ipfs/community/blob/master/CONTRIBUTING.md)
146 | 
147 | The IPFS implementation in JavaScript needs your help! There are a few things you can do right now to help out:
148 | 
149 | 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).
150 | 
151 | - **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
152 | - **Look at the [IPFS Roadmap](https://github.com/ipfs/roadmap)** This are the high priority items being worked on right now
153 | - **Perform code reviews** More eyes will help
154 |   a. speed the project along
155 |   b. ensure quality, and
156 |   c. reduce possible future bugs.
157 | - **Add tests**. There can never be enough tests.
158 | - **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
159 | 


--------------------------------------------------------------------------------