Skip to content

Commit d1830ee

Browse files
serban-alexandruserban-alexandru
committed
nextjs sample project
0 parents  commit d1830ee

15 files changed

+599
-0
lines changed

‎.dockerignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Dockerfile
2+
.dockerignore
3+
node_modules
4+
npm-debug.log
5+
README.md
6+
.next
7+
.git

‎.gitignore

+35
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+
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+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎Dockerfile

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
FROM node:18-alpine AS base
2+
3+
# Install dependencies only when needed
4+
FROM base AS deps
5+
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
6+
RUN apk add --no-cache libc6-compat
7+
WORKDIR /app
8+
9+
# Install dependencies based on the preferred package manager
10+
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
11+
RUN \
12+
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
13+
elif [ -f package-lock.json ]; then npm ci; \
14+
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
15+
else echo "Lockfile not found." && exit 1; \
16+
fi
17+
18+
19+
# Rebuild the source code only when needed
20+
FROM base AS builder
21+
WORKDIR /app
22+
COPY --from=deps /app/node_modules ./node_modules
23+
COPY . .
24+
25+
# Next.js collects completely anonymous telemetry data about general usage.
26+
# Learn more here: https://nextjs.org/telemetry
27+
# Uncomment the following line in case you want to disable telemetry during the build.
28+
# ENV NEXT_TELEMETRY_DISABLED 1
29+
30+
RUN yarn build
31+
32+
# If using npm comment out above and use below instead
33+
# RUN npm run build
34+
35+
# Production image, copy all the files and run next
36+
FROM base AS runner
37+
WORKDIR /app
38+
39+
ENV NODE_ENV production
40+
# Uncomment the following line in case you want to disable telemetry during runtime.
41+
# ENV NEXT_TELEMETRY_DISABLED 1
42+
43+
RUN addgroup --system --gid 1001 nodejs
44+
RUN adduser --system --uid 1001 nextjs
45+
46+
COPY --from=builder /app/public ./public
47+
48+
# Automatically leverage output traces to reduce image size
49+
# https://nextjs.org/docs/advanced-features/output-file-tracing
50+
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
51+
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
52+
53+
USER nextjs
54+
55+
EXPOSE 3000
56+
57+
ENV PORT 3000
58+
59+
CMD ["node", "server.js"]

‎README.md

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# With Docker
2+
3+
This examples shows how to use Docker with Next.js based on the [deployment documentation](https://nextjs.org/docs/deployment#docker-image). Additionally, it contains instructions for deploying to Google Cloud Run. However, you can use any container-based deployment host.
4+
5+
## How to use
6+
7+
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
8+
9+
```bash
10+
npx create-next-app --example with-docker nextjs-docker
11+
# or
12+
yarn create next-app --example with-docker nextjs-docker
13+
# or
14+
pnpm create next-app --example with-docker nextjs-docker
15+
```
16+
17+
## Using Docker
18+
19+
1. [Install Docker](https://docs.docker.com/get-docker/) on your machine.
20+
1. Build your container: `docker build -t nextjs-docker .`.
21+
1. Run your container: `docker run -p 3000:3000 nextjs-docker`.
22+
23+
You can view your images created with `docker images`.
24+
25+
### In existing projects
26+
27+
To add support for Docker to an existing project, just copy the `Dockerfile` into the root of the project and add the following to the `next.config.js` file:
28+
29+
```js
30+
// next.config.js
31+
module.exports = {
32+
// ... rest of the configuration.
33+
output: 'standalone',
34+
}
35+
```
36+
37+
This will build the project as a standalone app inside the Docker image.
38+
39+
## Deploying to Google Cloud Run
40+
41+
1. Install the [Google Cloud SDK](https://cloud.google.com/sdk/docs/install) so you can use `gcloud` on the command line.
42+
1. Run `gcloud auth login` to log in to your account.
43+
1. [Create a new project](https://cloud.google.com/run/docs/quickstarts/build-and-deploy) in Google Cloud Run (e.g. `nextjs-docker`). Ensure billing is turned on.
44+
1. Build your container image using Cloud Build: `gcloud builds submit --tag gcr.io/PROJECT-ID/helloworld --project PROJECT-ID`. This will also enable Cloud Build for your project.
45+
1. Deploy to Cloud Run: `gcloud run deploy --image gcr.io/PROJECT-ID/helloworld --project PROJECT-ID --platform managed`. Choose a region of your choice.
46+
47+
- You will be prompted for the service name: press Enter to accept the default name, `helloworld`.
48+
- You will be prompted for [region](https://cloud.google.com/run/docs/quickstarts/build-and-deploy#follow-cloud-run): select the region of your choice, for example `us-central1`.
49+
- You will be prompted to **allow unauthenticated invocations**: respond `y`.
50+
51+
Or click the button below, authorize the script, and select the project and region when prompted:
52+
53+
[![Run on Google Cloud](https://deploy.cloud.run/button.svg)](https://deploy.cloud.run/?git_repo=https://github.com/vercel/next.js.git&dir=examples/with-docker)
54+
55+
## Running Locally
56+
57+
First, run the development server:
58+
59+
```bash
60+
npm run dev
61+
# or
62+
yarn dev
63+
```
64+
65+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
66+
67+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
68+
69+
[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`.
70+
71+
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.

‎app.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "nextjs",
3+
"options": {
4+
"allow-unauthenticated": true,
5+
"memory": "256Mi",
6+
"cpu": "1",
7+
"port": 3000,
8+
"http2": false
9+
}
10+
}

‎next.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
module.exports = {
3+
output: 'standalone',
4+
}

‎package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"dev": "next dev",
5+
"build": "next build"
6+
},
7+
"dependencies": {
8+
"next": "latest",
9+
"react": "^18.2.0",
10+
"react-dom": "^18.2.0"
11+
}
12+
}

‎pages/_app.js

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

+5
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 hello(req, res) {
4+
res.status(200).json({ name: 'John Doe' })
5+
}

‎pages/index.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import Head from 'next/head'
2+
import styles from '../styles/Home.module.css'
3+
4+
export default function Home() {
5+
return (
6+
<div className={styles.container}>
7+
<Head>
8+
<title>Create Next App</title>
9+
<link rel="icon" href="/favicon.ico" />
10+
</Head>
11+
12+
<main className={styles.main}>
13+
<h1 className={styles.title}>
14+
Welcome to <a href="https://nextjs.org">Next.js</a> on Docker!
15+
</h1>
16+
17+
<p className={styles.description}>
18+
Get started by editing{' '}
19+
<code className={styles.code}>pages/index.js</code>
20+
</p>
21+
22+
<div className={styles.grid}>
23+
<a href="https://nextjs.org/docs" className={styles.card}>
24+
<h3>Documentation &rarr;</h3>
25+
<p>Find in-depth information about Next.js features and API.</p>
26+
</a>
27+
28+
<a href="https://nextjs.org/learn" className={styles.card}>
29+
<h3>Learn &rarr;</h3>
30+
<p>Learn about Next.js in an interactive course with quizzes!</p>
31+
</a>
32+
33+
<a
34+
href="https://github.com/vercel/next.js/tree/canary/examples"
35+
className={styles.card}
36+
>
37+
<h3>Examples &rarr;</h3>
38+
<p>Discover and deploy boilerplate example Next.js projects.</p>
39+
</a>
40+
41+
<a
42+
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
className={styles.card}
46+
>
47+
<h3>Deploy &rarr;</h3>
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+
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
63+
</a>
64+
</footer>
65+
</div>
66+
)
67+
}

‎public/favicon.ico

14.7 KB
Binary file not shown.

‎public/vercel.svg

+4
Loading

0 commit comments

Comments
 (0)