Skip to content

Commit 7d5f463

Browse files
ijjkijjk
authored
Merge branch 'canary' into update/locales-limit
2 parents 58ff62d + 6072afc commit 7d5f463

File tree

11 files changed

+460
-0
lines changed

11 files changed

+460
-0
lines changed

‎examples/with-couchbase/.env.local.example‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
COUCHBASE_USER=
2+
COUCHBASE_PASSWORD=
3+
COUCHBASE_ENDPOINT=
4+
COUCHBASE_BUCKET=
5+
IS_CLOUD_INSTANCE=

‎examples/with-couchbase/.gitignore‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
21+
# debug
22+
npm-debug.log*
23+
yarn-debug.log*
24+
yarn-error.log*
25+
26+
# local env files
27+
.env.local
28+
.env.development.local
29+
.env.test.local
30+
.env.production.local
31+
32+
# IDE Files
33+
.idea/

‎examples/with-couchbase/README.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
## Example app using Couchbase
2+
3+
[Couchbase](https://www.couchbase.com/) is a modern database for enterprise applications. This example will show you how to connect to and use Couchbase in your Next.js app.
4+
5+
If you want to learn more about Couchbase, visit the following pages:
6+
7+
- [Couchbase Docs](https://docs.couchbase.com/)
8+
- [Couchbase Developer Portal](https://developer.couchbase.com/)
9+
- [Couchbase Cloud](https://cloud.couchbase.com/sign-up)
10+
11+
## Preview
12+
13+
Preview the example live on [StackBlitz](http://stackblitz.com/):
14+
15+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-couchbase)
16+
17+
## Deploy your own
18+
19+
Once you have access to the environment variables you'll need, deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
20+
21+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-couchbase&project-name=with-couchbase&repository-name=with-couchbase&env=COUCHBASE_USER,COUCHBASE_PASSWORD,COUCHBASE_ENDPOINT,COUCHBASE_BUCKET,IS_CLOUD_INSTANCE&envDescription=Required%20to%20connect%20the%20app%20with%20Couchbase)
22+
23+
## How to use
24+
25+
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
26+
27+
```bash
28+
npx create-next-app --example with-couchbase with-couchbase-app
29+
# or
30+
yarn create next-app --example with-couchbase with-couchbase-app
31+
```
32+
33+
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
34+
35+
## Configuration
36+
37+
### Set up a Couchbase database
38+
39+
Set up a Couchbase database either locally or with [Couchbase Cloud](https://cloud.couchbase.com/sign-up).
40+
41+
Local installation can be accomplished through a variety of methods, but [Docker](https://docs.couchbase.com/server/current/install/getting-started-docker.html) is the simplest.
42+
43+
After Couchbase is installed, set up a cluster by following [this tutorial](https://docs.couchbase.com/server/current/manage/manage-nodes/create-cluster.html).
44+
45+
- _NOTE:_ the **eventing** and **analytics** services can be unchecked if memory is a constraint (this is often the case with docker and other local installations).
46+
47+
A variety of sample buckets can be installed to get up and running with a data model quickly.
48+
49+
### Set up environment variables
50+
51+
Copy the `env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
52+
53+
```bash
54+
cp .env.local.example .env.local
55+
```
56+
57+
Set each variable on `.env.local`:
58+
59+
- `COUCHBASE_USERNAME` - The username of an authorized user on your Couchbase instance
60+
- `COUCHBASE_PASSWORD` - The corresponding password for the username specified above
61+
- `COUCHBASE_ENDPOINT` - The endpoint to connect to. Use `localhost` for a local instance of Couchbase, or the Wide Area Network address for a cloud instance.
62+
- `COUCHBASE_BUCKET` - The bucket you'd like to connect to for testing.
63+
- `IS_CLOUD_INSTANCE` - `true` if you are trying to connect to an instance of Couchbase Cloud, `false` otherwise.
64+
65+
### Run Next.js in development mode
66+
67+
```bash
68+
npm install
69+
npm run dev
70+
# or
71+
yarn install
72+
yarn dev
73+
```
74+
75+
Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
76+
77+
You will either see a message stating "You are connected to Couchbase" or "You are NOT connected to Couchbase". Ensure that you have provided the correct environment variables.
78+
79+
When you are successfully connected, you can refer to the [Couchbase Node.js SDK docs](https://docs.couchbase.com/nodejs-sdk/current/hello-world/start-using-sdk.html) for further instructions on how to query your database.
80+
81+
## Deploy on Vercel
82+
83+
You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
84+
85+
#### Deploy Your Local Project
86+
87+
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example).
88+
89+
## Notes
90+
91+
- When you import your project on Vercel, make sure to click on **Environment Variables** and set the keys to match your `.env.local` file.
92+
93+
- For a cloud deployment on Vercel, the **Environment Variables** values will need to **correspond to a cloud instance of Couchbase** (localhost will **NOT** connect from a remote server such as Vercel). Find info on [getting started with Couchbase cloud](https://developer.couchbase.com/tutorial-cloud-getting-started/).
94+
95+
- _Important:_ you will have to allowlist 0.0.0.0/0 as the IP address, since Vercel's serverless deployments use [dynamic IP addresses](https://vercel.com/docs/solutions/databases#allowing-&-blocking-ip-addresses)

‎examples/with-couchbase/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"dev": "next dev",
5+
"build": "next build",
6+
"start": "next start"
7+
},
8+
"dependencies": {
9+
"couchbase": "^3.1.3",
10+
"next": "latest",
11+
"react": "^17.0.2",
12+
"react-dom": "^17.0.2"
13+
}
14+
}

‎examples/with-couchbase/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/with-couchbase/pages/index.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import Head from 'next/head'
2+
import styles from '../styles/Home.module.css'
3+
import { connectToDatabase } from '../util/couchbase'
4+
5+
export default function Home({ isConnected }) {
6+
return (
7+
<div className={styles.container}>
8+
<Head>
9+
<title>Create Next App</title>
10+
<link rel="icon" href="/favicon.ico" />
11+
</Head>
12+
13+
<main className={styles.main}>
14+
<h1 className={styles.title}>
15+
Welcome to <a href="https://nextjs.org">Next.js with Couchbase!</a>
16+
</h1>
17+
18+
{isConnected ? (
19+
<h2 className={`${styles.subtitle} ${styles.green}`}>
20+
You are connected to Couchbase
21+
</h2>
22+
) : (
23+
<>
24+
<h2 className={`${styles.subtitle} ${styles.red}`}>
25+
You are NOT connected to Couchbase. Try refreshing the page, and
26+
if this error persists check the <code>README.md</code> for
27+
instructions.
28+
</h2>
29+
<em className={styles.center}>
30+
Note: if the database was recently started, you might have to
31+
re-start the app (in dev mode) or re-deploy to your serverless
32+
environment for changes to take effect.
33+
</em>
34+
</>
35+
)}
36+
37+
<p className={styles.description}>
38+
Get started by editing{' '}
39+
<code className={styles.code}>pages/index.js</code>
40+
</p>
41+
</main>
42+
43+
<footer className={styles.footer}>
44+
<a
45+
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
46+
target="_blank"
47+
rel="noopener noreferrer"
48+
>
49+
Powered by{' '}
50+
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
51+
</a>
52+
</footer>
53+
</div>
54+
)
55+
}
56+
57+
export async function getServerSideProps(context) {
58+
let connection = await connectToDatabase()
59+
60+
const { collection } = connection
61+
62+
// Check connection with a KV GET operation for a key that doesnt exist
63+
let isConnected = false
64+
try {
65+
await collection.get('testingConnectionKey')
66+
} catch (err) {
67+
// error message will return 'document not found' if and only if we are connected
68+
// (but this document is not present, we're only trying to test the connection here)
69+
if (err.message === 'document not found') {
70+
isConnected = true
71+
}
72+
// if the error message is anything OTHER THAN 'document not found', the connection is broken
73+
}
74+
75+
return {
76+
props: { isConnected },
77+
}
78+
}

‎examples/with-couchbase/public/favicon.ico‎

14.7 KB
Binary file not shown.

‎examples/with-couchbase/public/vercel.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎examples/with-couchbase/styles/Home.module.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
.small {
2+
font-size: 10px;
3+
}
4+
5+
.center {
6+
text-align: center;
7+
}
8+
9+
.red,
10+
.error {
11+
color: indianred;
12+
}
13+
14+
.green,
15+
.success {
16+
color: lightseagreen;
17+
}
18+
19+
.container {
20+
min-height: 100vh;
21+
padding: 0 0.5rem;
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
align-items: center;
26+
}
27+
28+
.main {
29+
padding: 5rem 0;
30+
flex: 1;
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: center;
34+
align-items: center;
35+
}
36+
37+
.footer {
38+
width: 100%;
39+
height: 100px;
40+
border-top: 1px solid #eaeaea;
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
}
45+
46+
.footer img {
47+
margin-left: 0.5rem;
48+
}
49+
50+
.footer a {
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
text-decoration: none;
55+
color: inherit;
56+
}
57+
58+
.title a {
59+
color: #0070f3;
60+
text-decoration: none;
61+
}
62+
63+
.title a:hover,
64+
.title a:focus,
65+
.title a:active {
66+
text-decoration: underline;
67+
}
68+
69+
.title {
70+
margin: 0;
71+
line-height: 1.15;
72+
font-size: 4rem;
73+
}
74+
75+
.title,
76+
.description {
77+
text-align: center;
78+
}
79+
80+
.subtitle {
81+
font-size: 2rem;
82+
text-align: center;
83+
}
84+
85+
.description {
86+
line-height: 1.5;
87+
font-size: 1.5rem;
88+
}
89+
90+
.code {
91+
background: #fafafa;
92+
border-radius: 5px;
93+
padding: 0.75rem;
94+
font-size: 1.1rem;
95+
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
96+
Bitstream Vera Sans Mono, Courier New, monospace;
97+
}
98+
99+
.grid {
100+
display: flex;
101+
align-items: center;
102+
justify-content: center;
103+
flex-wrap: wrap;
104+
105+
max-width: 800px;
106+
margin-top: 3rem;
107+
}
108+
109+
.card {
110+
margin: 1rem;
111+
flex-basis: 45%;
112+
padding: 1.5rem;
113+
text-align: left;
114+
color: inherit;
115+
text-decoration: none;
116+
border: 1px solid #eaeaea;
117+
border-radius: 10px;
118+
transition: color 0.15s ease, border-color 0.15s ease;
119+
}
120+
121+
.card:hover,
122+
.card:focus,
123+
.card:active {
124+
color: #0070f3;
125+
border-color: #0070f3;
126+
}
127+
128+
.card h3 {
129+
margin: 0 0 1rem 0;
130+
font-size: 1.5rem;
131+
}
132+
133+
.card p {
134+
margin: 0;
135+
font-size: 1.25rem;
136+
line-height: 1.5;
137+
}
138+
139+
.logo {
140+
height: 1em;
141+
}
142+
143+
@media (max-width: 600px) {
144+
.grid {
145+
width: 100%;
146+
flex-direction: column;
147+
}
148+
}

0 commit comments

Comments
 (0)