Lesson 25: SSR Next.js

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -13,7 +13,10 @@
 		"loki:update": "npm run build-storybook && npx loki update --requireReference --reactUri file:./storybook-static",
 		"loki:approve": "npx loki approve",
 		"test:loki": "npm run build-storybook && npx loki --requireReference --reactUri file:./storybook-static",
-		"heroku-prebuild": "npm install --dev"
+		"heroku-prebuild": "npm install --dev",
+		"next:dev": "next",
+		"next:build": "next build",
+		"next:start": "next start"
 	},
 	"keywords": [
 		"calculation",
@@ -91,6 +94,8 @@
 		"jest": "^25.5.4",
 		"jest-emotion": "^10.0.32",
 		"loki": "^0.24.0",
+		"next": "^9.5.5",
+		"next-redux-wrapper": "^6.0.2",
 		"postcss-loader": "^3.0.0",
 		"prettier": "^2.0.5",
 		"react-test-renderer": "^16.13.1",

src/pages/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { GameOfLifeProto } from '@/modules/Main/GameOfLifeProto';
+import { Field } from '@/components/Field/Field';
+
+export default class extends React.Component {
+	render() {
+		return (
+			<GameOfLifeProto rows={20} columns={20} fieldComponent={Field} />
+		);
+	}
+}

tsconfig.json

@@ -1,20 +1,29 @@
-{
-	"compilerOptions": {
-		"baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
-		"paths": {
-			"@types/*": ["src/types/*"],
-			"@components/*": ["src/components/*"],
-			"@screens/*": ["src/screens/*"],
-			"@common/*": ["src/common/*"],
-			"@/*": ["src/*"]
-		},
-		"downlevelIteration": true,
-		"target": "ES2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
-		"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-		"allowJs": true /* Allow javascript files to be compiled. */,
-		"jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
-		"sourceMap": true /* Generates corresponding '.map' file. */,
-		"strict": true /* Enable all strict type-checking options. */,
-		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-	}
-}
+{
+	"compilerOptions": {
+		"baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
+		"paths": {
+			"@/types/*": ["src/types/*"],
+			"@/components/*": ["src/components/*"],
+			"@/screens/*": ["src/screens/*"],
+			"@/common/*": ["src/common/*"],
+			"@/*": ["src/*"]
+		},
+		"downlevelIteration": true,
+		"target": "ES2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+		"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+		"allowJs": true /* Allow javascript files to be compiled. */,
+		"jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+		"sourceMap": true /* Generates corresponding '.map' file. */,
+		"strict": true /* Enable all strict type-checking options. */,
+		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"noEmit": true,
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
+}