Skip to content

Commit 8374e61

Browse files
ryanbethelryanbethel
committed
move to main
0 parents  commit 8374e61

14 files changed

+384
-0
lines changed

‎.eslintrc

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

‎.gitignore

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

‎README.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
This is a starter template for [Next.js](https://nextjs.org), extended to deploy with [Begin](https://begin.com) that includes server side rendering.
2+
3+
## Deploy your own
4+
5+
[![Deploy to Begin](https://static.begin.com/deploy-to-begin.svg)](https://begin.com/apps/create?template=https://github.com/begin-examples/nextjs-ssr)
6+
7+
Deploy your own clone of this app to Begin!
8+
9+
## Getting started
10+
11+
### Project setup
12+
13+
```bash
14+
npm install
15+
```
16+
17+
### Start the local dev server
18+
19+
```bash
20+
npm run dev
21+
```
22+
23+
Navigate to [localhost:3000](http://localhost:3000). You should see your app running.
24+
25+
## Begin Reference
26+
27+
- [Quickstart](https://docs.begin.com/en/guides/quickstart/) - basics on working locally, project structure, deploying, and accessing your Begin app
28+
- [Creating new routes](https://docs.begin.com/en/functions/creating-new-functions) - basics on expanding the capabilities of your app
29+
30+
Head to [docs.begin.com](https://docs.begin.com/) to learn more!
31+
32+
## Adding a Next App to Begin
33+
34+
The following steps can be used to deploy most Next apps to Begin.com.
35+
- Install dependencies to wrap Next server
36+
```bash
37+
npm i express serverless-http
38+
```
39+
40+
- Add `app.arc` manifest file to the root folder
41+
```
42+
#app.arc
43+
@app
44+
next-SSR
45+
46+
@http
47+
/*
48+
method get
49+
src begin
50+
```
51+
52+
- Add a handler to server the Next App to the `begin` folder.
53+
```javascript
54+
//index.js
55+
let next = require("next");
56+
let express= require("express")
57+
let serverless = require('serverless-http');
58+
59+
let app = next({ dev:false });
60+
let handle = app.getRequestHandler();
61+
62+
let server= express()
63+
64+
server.get("*", (req, res) => {
65+
return handle(req, res);
66+
});
67+
68+
module.exports.handler = serverless(server)
69+
```
70+
71+
- Add a build script to `package.json` to run on Begin.
72+
```json
73+
"scripts": {
74+
"build": "NODE_ENV=production next build && cp -r .next begin/.next "
75+
}
76+
```
77+
- Add build output folder to `.gitignore`
78+
```git
79+
#.gitignore
80+
/begin/.next
81+
```

‎app.arc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@app
2+
next-SSR
3+
4+
@http
5+
/*
6+
method get
7+
src begin

‎begin/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
let next = require("next");
2+
let express= require("express")
3+
let serverless = require('serverless-http');
4+
5+
let app = next({ dev:false });
6+
let handle = app.getRequestHandler();
7+
8+
let server= express()
9+
10+
server.get("*", (req, res) => {
11+
return handle(req, res);
12+
});
13+
14+
module.exports.handler = serverless(server)

‎next.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
reactStrictMode: true,
3+
}

‎package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "next-ssr",
3+
"version": "0.1.0",
4+
"scripts": {
5+
"dev": "next dev",
6+
"build": "NODE_ENV=production next build && cp -r .next begin/.next "
7+
},
8+
"dependencies": {
9+
"express": "^4.17.1",
10+
"next": "11.0.1",
11+
"react": "17.0.2",
12+
"react-dom": "17.0.2",
13+
"serverless-http": "^2.7.0"
14+
},
15+
"devDependencies": {
16+
"eslint": "^7.29.0",
17+
"eslint-config-next": "^11.0.1"
18+
}
19+
}

‎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

‎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+
}

‎pages/index.js

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

‎public/favicon.ico

25.3 KB
Binary file not shown.

‎public/vercel.svg

Lines changed: 4 additions & 0 deletions
Loading

‎styles/Home.module.css

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

0 commit comments

Comments
 (0)