v3.1: Upgraded to NextJS 12

Static Dockerfile

Signed-off-by: Avior <github@avior.me>

.dockerignore

@@ -1,28 +1,19 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Dev
+/.devcontainer
+/.vscode
+
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
 
 # next.js
 /.next/
 /out/
 
-# production
-/build
-
 # misc
 .DS_Store
-.env*
+.env
 
 # debug
 npm-debug.log*
-
-dist/
-*.asc
-
-.vercel

.env.example

@@ -0,0 +1,4 @@
+# Store in this file the definition of your secret so that they are reusable
+# Store in the `.env` file your secrets
+
+EXAMPLE="TRUE"

.gitignore

@@ -1,27 +1,13 @@
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
 
 # next.js
 /.next/
 /out/
 
-# production
-/build
-
 # misc
 .DS_Store
-.env*
+.env
 
 # debug
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-dist/
-*.asc
-db/

Dockerfile

@@ -1,13 +1,29 @@
-# Production Dockerfile
+# This Dockerfile allows you to run NextJS in server mode
 
-FROM node:alpine as BUILD_IMAGE
+#########
+# Build #
+#########
+FROM docker.io/node:alpine as BUILD_IMAGE
 
-WORKDIR /app
+# inform software to be in production
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
 
+# External deps (for node-gyp add: "python3 make g++")
+# git is used to install the npm packages with git deps
+RUN apk add --no-cache git
+
+# run as non root user
+USER node
+
+# go to user repository
+WORKDIR /home/node
+
+# Add package json
 ADD package.json package-lock.json ./
 
-# install dependencies
+# install dependencies from package lock
-RUN npm i
+RUN npm ci --omit=dev
 
 # Add project files
 ADD . .
@@ -15,20 +31,27 @@ ADD . .
 # build
 RUN npm run build
 
-# remove dev dependencies
+##############
-RUN npm prune --production
+# Production #
-
+##############
-# go to another VM
 FROM node:alpine
 
-# go to folder
+# inform software to be in production
-WORKDIR /app
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# run as non root user
+USER node
+
+# go to work folder
+WORKDIR /home/node
 
 # copy from build image
-COPY --from=BUILD_IMAGE /app/package.json ./package.json
+COPY --from=BUILD_IMAGE /home/node/package.json ./package.json
-COPY --from=BUILD_IMAGE /app/node_modules ./node_modules
+COPY --from=BUILD_IMAGE /home/node/node_modules ./node_modules
-COPY --from=BUILD_IMAGE /app/.next ./.next
+COPY --from=BUILD_IMAGE /home/node/.next ./.next
-COPY --from=BUILD_IMAGE /app/public ./public
+COPY --from=BUILD_IMAGE /home/node/next.config.js ./
+COPY --from=BUILD_IMAGE /home/node/public ./public
 
 # Expose port
 EXPOSE 3000

Dockerfile.static

@@ -0,0 +1,44 @@
+# This Dockerfile allows you to run NextJS in a static container (no server side)
+
+#########
+# Build #
+#########
+FROM docker.io/node:alpine as BUILD_IMAGE
+
+# inform software to be in production
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# External deps (for node-gyp add: "python3 make g++")
+# git is used to install the npm packages with git deps
+RUN apk add --no-cache git
+
+# run as non root user
+USER node
+
+# go to user repository
+WORKDIR /home/node
+
+# Add package json
+ADD package.json package-lock.json ./
+
+# install dependencies from package lock
+RUN npm ci --omit=dev
+
+# Add project files
+ADD . .
+
+# build
+RUN npm run build &&\
+	npm run export
+
+##############
+# Production #
+##############
+FROM docker.io/nginx:alpine
+
+# go to NGINX folder
+WORKDIR /usr/share/nginx/html
+
+# copy from build image
+COPY --from=BUILD_IMAGE /home/node/out ./

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next.config.js

@@ -2,6 +2,15 @@
 const withPlugins = require('next-compose-plugins')
 const { plugins, config } = require('@dzeio/config/next.config')
 
+/**
+ * @type {import('next').NextConfig}
+ */
+const modifiedConfig = {
+	images: {
+		unoptimized: true
+	}
+}
+
 module.exports = withPlugins([...plugins],
-	config()
+	{...config(), ...modifiedConfig}
 )

package.json

@@ -1,42 +1,41 @@
 {
 	"name": "@avior/next-template",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"license": "MIT",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
+		"export": "next export",
 		"lint": "eslint . --ext .ts,.tsx",
 		"test": "jest --coverage"
 	},
 	"dependencies": {
-		"@dzeio/components": "^0.11.2",
+		"@dzeio/components": "git://github.com/dzeiocom/components#v1-alpha",
-		"@dzeio/config": "^1.0.0",
+		"@dzeio/config": "^1",
-		"critters": "^0.0.10",
+		"lucide-react": "^0.90.00",
-		"lucide-react": "^0.16.00",
+		"next": "^12",
-		"next": "^11.1.3",
+		"next-compose-plugins": "^2",
-		"next-compose-plugins": "^2.2.0",
+		"next-plausible": "^3",
-		"next-pre-css": "^1.0.0",
+		"next-pre-css": "git://github.com/tcgdex/next-pre-css",
-		"next-seo": "^4.28.1",
+		"next-seo": "^5",
-		"react": "^17.0.1",
+		"react": "^18",
-		"react-dom": "^17.0.1",
+		"react-dom": "^18",
-		"stylus": "^0.55.0",
+		"stylus": "^0.59.0",
-		"stylus-loader": "^6.0.0",
+		"stylus-loader": "^7",
-		"typescript": "^4.1.3",
+		"typescript": "^4",
-		"webpack": "^5.32.0"
+		"webpack": "^5"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.14.6",
+		"@babel/core": "^7",
-		"@next/eslint-plugin-next": "^11.0.0",
+		"@next/eslint-plugin-next": "^12",
-		"@types/node": "^16.0.0",
+		"@types/node": "^18",
-		"@types/react": "^17.0.1",
+		"@types/react": "^18",
-		"@typescript-eslint/eslint-plugin": "^4.15.0",
+		"@typescript-eslint/eslint-plugin": "^5",
-		"@typescript-eslint/parser": "^4.15.0",
+		"@typescript-eslint/parser": "^5",
-		"eslint": "^7.1.0",
+		"eslint": "^8",
-		"eslint-config-next": "^11.0.0",
+		"eslint-config-next": "^12",
-		"eslint-plugin-react": "^7.18.3",
+		"eslint-plugin-react": "^7"
-		"jest": "^27.0.6",
-		"react-test-renderer": "^17.0.2"
 	}
 }

src/CONSTANTS.ts

@@ -1,3 +0,0 @@
-// Put your program constants here
-
-export const TEST = true

src/components/README.md

@@ -0,0 +1,10 @@
+# Components used through the app
+
+folder architecture:
+
+```
+components
+|-- componentName
+    |-- index.tsx
+    |-- componentName.styl
+```

src/globals.styl

@@ -0,0 +1,4 @@
+// Here is your global Stylus styling affecting the whole page
+
+html, body
+	background white

src/libs/README.md

@@ -0,0 +1 @@
+# Libs used through the app (frontend/backend libs)

src/models/README.md

@@ -0,0 +1 @@
+the different models you app uses

src/pages/_app.tsx

@@ -1,22 +1,12 @@
 import React from 'react'
 import App from 'next/app'
-import Router from 'next/router'
 import { DefaultSeo } from 'next-seo'
 import { NotificationManager, Navbar, Loader, Footer } from '@dzeio/components'
 
-// import '../styl/globals.styl'
+// import '../globals.styl'
 import '@dzeio/components/style.css'
 
-export default class CustomApp extends App<unknown, unknown, {path?: string}> {
+export default class CustomApp extends App {
-
-	public componentDidMount(): void {
-		this.checkMessage()
-		this.setState({ path: Router.asPath })
-		Router.events.on('routeChangeComplete', () => {
-			this.checkMessage()
-			this.setState({ path: Router.asPath })
-		})
-	}
 
 	public render(): JSX.Element {
 		const { Component, pageProps } = this.props
@@ -28,10 +18,7 @@ export default class CustomApp extends App<unknown, unknown, {path?: string}> {
 					title="Sitemap"
 					description="Site description"
 				/>
-				<Navbar
+				<Navbar menu={[{name: 'Hello'}, {name: 'World'}]} />
-					type="navbar"
-					items={[]}
-				/>
 				<Loader auto={{ increment: [1, 10], interval: [5, 50] }} />
 				<Component {...pageProps} />
 				<NotificationManager manageRoutes />
@@ -39,12 +26,4 @@ export default class CustomApp extends App<unknown, unknown, {path?: string}> {
 			</>
 		)
 	}
-
-	private checkMessage() {
-		const msg = Router.query.message
-		if (typeof msg === 'string') {
-			NotificationManager.addNotification(msg)
-		}
-	}
-
 }

src/pages/index.module.styl

@@ -0,0 +1,2 @@
+.test
+	background: orange !important

src/pages/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import { Text } from '@dzeio/components'
 
+import css from './index.module.styl'
+
 export default class Homepage extends React.Component {
 
 	public render = (): JSX.Element => (
-		<main>
+		<main className={css.test}>
 			<Text>Hello World !</Text>
 		</main>
 	)

src/styl/globals.styl

@@ -1,3 +0,0 @@
-// Global styl here
-html, body
-	background white

tsconfig.json

@@ -4,14 +4,7 @@
 		"target": "esnext",
 		"module": "esnext",
 		"baseUrl": "./src",
-		"paths": {
+		"incremental": true
-			"@styl/*": [
-				"styl/*"
-			],
-			"@cp/*": [
-				"components/*"
-			],
-		}
 	},
 	"exclude": [
 		"node_modules",
@@ -20,7 +13,7 @@
 	],
 	"include": [
 		"next-env.d.ts",
-		"src/styl/stylus.d.ts",
+		"stylus.d.ts",
 		"**/*.ts",
 		"**/*.tsx"
 	]