├── .gitignore ├── .nginx └── nginx.conf ├── Dockerfile ├── README.md ├── components ├── footer.js └── header.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── api │ └── hello.js └── index.js ├── public ├── favicon.ico └── vercel.svg └── styles ├── Home.module.css └── globals.css /.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 | -------------------------------------------------------------------------------- /.nginx/nginx.conf: -------------------------------------------------------------------------------- 1 | worker_processes 4; 2 | 3 | events { worker_connections 1024; } 4 | 5 | http { 6 | server { 7 | listen 80; 8 | root /usr/share/nginx/html; 9 | include /etc/nginx/mime.types; 10 | 11 | location /appui { 12 | try_files $uri /index.html; 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # stage1 as builder 2 | FROM node:10-alpine as builder 3 | 4 | # copy the package.json to install dependencies 5 | COPY package.json package-lock.json ./ 6 | 7 | # Install the dependencies and make the folder 8 | RUN npm install && mkdir /nextjs-ui && mv ./node_modules ./nextjs-ui 9 | 10 | WORKDIR /nextjs-ui 11 | 12 | COPY . . 13 | 14 | # Build the project and copy the files 15 | RUN npm run build 16 | 17 | 18 | FROM nginx:alpine 19 | 20 | #!/bin/sh 21 | 22 | COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf 23 | 24 | ## Remove default nginx index page 25 | RUN rm -rf /usr/share/nginx/html/* 26 | 27 | # Copy from the stahg 1 28 | COPY --from=builder /nextjs-ui/out /usr/share/nginx/html 29 | 30 | EXPOSE 3000 80 31 | 32 | ENTRYPOINT ["nginx", "-g", "daemon off;"] -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 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). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | ## Learn More 18 | 19 | To learn more about Next.js, take a look at the following resources: 20 | 21 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 22 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 23 | 24 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 25 | 26 | ## Deploy on Vercel 27 | 28 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 29 | 30 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 31 | -------------------------------------------------------------------------------- /components/footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => { 4 | 5 | return ( 6 |
7 | 2020 8 |
9 | ) 10 | 11 | }; 12 | 13 | export default Footer -------------------------------------------------------------------------------- /components/header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Header = () => { 4 | 5 | return ( 6 |
7 | Simple Next.js App 8 |
9 | ) 10 | 11 | }; 12 | 13 | export default Header -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-nginx-docker", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build && next export", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "next": "10.0.2", 12 | "react": "17.0.1", 13 | "react-dom": "17.0.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import Header from '../components/header' 3 | import Footer from '../components/footer' 4 | 5 | function MyApp({ Component, pageProps }) { 6 | return ( 7 |
8 |
9 |
10 |

Simple Next.js App served by NGINX and Docker

11 |
12 |
14 | ); 15 | } 16 | 17 | export default MyApp 18 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default (req, res) => { 4 | res.statusCode = 200 5 | res.json({ name: 'John Doe' }) 6 | } 7 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import styles from '../styles/Home.module.css' 3 | 4 | export default function Home() { 5 | return ( 6 |
7 | 8 | Create Next App 9 | 10 | 11 | 12 |
13 |

14 | Welcome to Next.js! 15 |

16 | 17 |

18 | Get started by editing{' '} 19 | pages/index.js 20 |

21 | 22 |
23 | 24 |

Documentation →

25 |

Find in-depth information about Next.js features and API.

26 | 27 | 28 | 29 |

Learn →

30 |

Learn about Next.js in an interactive course with quizzes!

31 | 32 | 33 | 37 |

Examples →

38 |

Discover and deploy boilerplate example Next.js projects.

39 | 40 | 41 | 45 |

Deploy →

46 |

47 | Instantly deploy your Next.js site to a public URL with Vercel. 48 |

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