Skip to content

Commit 88aa316

Browse files
ericapisaniericapisani
committed
feat: create demo for using an edge function on a next site
1 parent f81a832 commit 88aa316

File tree

10 files changed

+370
-4
lines changed

10 files changed

+370
-4
lines changed

‎demos/next-with-edge-functions/.gitignore

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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

‎demos/next-with-edge-functions/netlify.toml

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
[build]
2+
command = "next build"
3+
publish = ".next"
4+
5+
[dev]
6+
framework = "#static"
7+
8+
[[plugins]]
9+
package = "../plugin-wrapper/"
10+
11+
# This is a fake plugin, that makes it run npm install
12+
[[plugins]]
13+
package = "@netlify/plugin-local-install-core"
14+
15+
[[edge_functions]]
16+
path = "/"
17+
function = "helloOnTheEdge"

‎demos/next-with-edge-functions/netlify/edge-functions/helloOnTheEdge.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default (req, context) => context.json({firstName: "Louise", lastName: "Belcher"});

‎demos/next-with-edge-functions/next.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
eslint: {
3+
// Warning: This allows production builds to successfully complete even if
4+
// your project has ESLint errors.
5+
ignoreDuringBuilds: true,
6+
},
7+
}

‎demos/next-with-edge-functions/package.json

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

‎demos/next-with-edge-functions/pages/index.js

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import Head from 'next/head'
2+
3+
export default function Home() {
4+
return (
5+
<div className="container">
6+
<Head>
7+
<title>Create Next App</title>
8+
<link rel="icon" href="/favicon.ico" />
9+
</Head>
10+
11+
<main>
12+
<h1 className="title">
13+
Welcome to <a href="https://nextjs.org">Next.js!</a>
14+
</h1>
15+
16+
<p className="description">
17+
Get started by editing <code>pages/index.js</code>
18+
</p>
19+
20+
<div className="grid">
21+
<a href="https://nextjs.org/docs" className="card">
22+
<h3>Documentation &rarr;</h3>
23+
<p>Find in-depth information about Next.js features and API.</p>
24+
</a>
25+
26+
<a href="https://nextjs.org/learn" className="card">
27+
<h3>Learn &rarr;</h3>
28+
<p>Learn about Next.js in an interactive course with quizzes!</p>
29+
</a>
30+
31+
<a
32+
href="https://github.com/vercel/next.js/tree/master/examples"
33+
className="card"
34+
>
35+
<h3>Examples &rarr;</h3>
36+
<p>Discover and deploy boilerplate example Next.js projects.</p>
37+
</a>
38+
39+
<a
40+
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
41+
className="card"
42+
>
43+
<h3>Deploy &rarr;</h3>
44+
<p>
45+
Instantly deploy your Next.js site to a public URL with Vercel.
46+
</p>
47+
</a>
48+
</div>
49+
</main>
50+
51+
<footer>
52+
<a
53+
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
54+
target="_blank"
55+
rel="noopener noreferrer"
56+
>
57+
Powered by{' '}
58+
<img src="/vercel.svg" alt="Vercel" className="logo" />
59+
</a>
60+
</footer>
61+
62+
<style jsx>{`
63+
.container {
64+
min-height: 100vh;
65+
padding: 0 0.5rem;
66+
display: flex;
67+
flex-direction: column;
68+
justify-content: center;
69+
align-items: center;
70+
}
71+
72+
main {
73+
padding: 5rem 0;
74+
flex: 1;
75+
display: flex;
76+
flex-direction: column;
77+
justify-content: center;
78+
align-items: center;
79+
}
80+
81+
footer {
82+
width: 100%;
83+
height: 100px;
84+
border-top: 1px solid #eaeaea;
85+
display: flex;
86+
justify-content: center;
87+
align-items: center;
88+
}
89+
90+
footer img {
91+
margin-left: 0.5rem;
92+
}
93+
94+
footer a {
95+
display: flex;
96+
justify-content: center;
97+
align-items: center;
98+
}
99+
100+
a {
101+
color: inherit;
102+
text-decoration: none;
103+
}
104+
105+
.title a {
106+
color: #0070f3;
107+
text-decoration: none;
108+
}
109+
110+
.title a:hover,
111+
.title a:focus,
112+
.title a:active {
113+
text-decoration: underline;
114+
}
115+
116+
.title {
117+
margin: 0;
118+
line-height: 1.15;
119+
font-size: 4rem;
120+
}
121+
122+
.title,
123+
.description {
124+
text-align: center;
125+
}
126+
127+
.description {
128+
line-height: 1.5;
129+
font-size: 1.5rem;
130+
}
131+
132+
code {
133+
background: #fafafa;
134+
border-radius: 5px;
135+
padding: 0.75rem;
136+
font-size: 1.1rem;
137+
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
138+
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
139+
}
140+
141+
.grid {
142+
display: flex;
143+
align-items: center;
144+
justify-content: center;
145+
flex-wrap: wrap;
146+
147+
max-width: 800px;
148+
margin-top: 3rem;
149+
}
150+
151+
.card {
152+
margin: 1rem;
153+
flex-basis: 45%;
154+
padding: 1.5rem;
155+
text-align: left;
156+
color: inherit;
157+
text-decoration: none;
158+
border: 1px solid #eaeaea;
159+
border-radius: 10px;
160+
transition: color 0.15s ease, border-color 0.15s ease;
161+
}
162+
163+
.card:hover,
164+
.card:focus,
165+
.card:active {
166+
color: #0070f3;
167+
border-color: #0070f3;
168+
}
169+
170+
.card h3 {
171+
margin: 0 0 1rem 0;
172+
font-size: 1.5rem;
173+
}
174+
175+
.card p {
176+
margin: 0;
177+
font-size: 1.25rem;
178+
line-height: 1.5;
179+
}
180+
181+
.logo {
182+
height: 1em;
183+
}
184+
185+
@media (max-width: 600px) {
186+
.grid {
187+
width: 100%;
188+
flex-direction: column;
189+
}
190+
}
191+
`}</style>
192+
193+
<style jsx global>{`
194+
html,
195+
body {
196+
padding: 0;
197+
margin: 0;
198+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
199+
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
200+
sans-serif;
201+
}
202+
203+
* {
204+
box-sizing: border-box;
205+
}
206+
`}</style>
207+
</div>
208+
)
209+
}

‎demos/next-with-edge-functions/public/favicon.ico

14.7 KB
Binary file not shown.

‎demos/next-with-edge-functions/public/vercel.svg

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)