Next.js. Server Side Rendering

.github/pull_request_template.md

@@ -3,7 +3,8 @@
 3. Deploy: [link](https://github.com/)
 4. Done 28.05.2020 / deadline 31.05.2020
 5. Score: 75 / 110
-  - [x] Application is divided to logical modules / layers. Like working with api it's separate module, as well as working with UI rendering, or working with an application state, etc. Better discuss architecture with a mentor before implementing. (40/40)
-  - [x] All the HTML-content is generated by JavaScript (body contains only one tag script inside). (15/30) 
-  - [ ] Application is SPA.(0/20)
-  - [x] Webpack or another bundler should be used. There should be one HTML-file, JS-file, and one CSS-file (or it can be embedded right in the HTML-file). (20/20)
+
+- [x] Application is divided to logical modules / layers. Like working with api it's separate module, as well as working with UI rendering, or working with an application state, etc. Better discuss architecture with a mentor before implementing. (40/40)
+- [x] All the HTML-content is generated by JavaScript (body contains only one tag script inside). (15/30)
+- [ ] Application is SPA.(0/20)
+- [x] Webpack or another bundler should be used. There should be one HTML-file, JS-file, and one CSS-file (or it can be embedded right in the HTML-file). (20/20)

.prettierrc

@@ -1,7 +1,7 @@
 {
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "all",
-    "printWidth": 80,
-    "tabWidth": 2
-  }
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2
+}

eslint.config.js

@@ -6,6 +6,7 @@ import tsPlugin from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 import importPlugin from 'eslint-plugin-import';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
+import nextPlugin from '@next/eslint-plugin-next';
 
 export default [
   // Base
@@ -34,7 +35,7 @@ export default [
     languageOptions: {
       parser: tsParser,
       parserOptions: {
-        project: './tsconfig.app.json',
+        project: './tsconfig.json',
         tsconfigRootDir: import.meta.dirname,
         ecmaFeatures: {
           jsx: true,
@@ -52,10 +53,14 @@ export default [
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
       'jsx-a11y': jsxA11y,
+      '@next/next': nextPlugin,
     },
     rules: {
       ...tsPlugin.configs.recommended.rules,
       ...reactHooks.configs.recommended.rules,
+      ...nextPlugin.configs.recommended.rules,
+
+      // Custom rules
       'react-refresh/only-export-components': 'warn',
       'import/order': [
         'warn',

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // output: 'export', // Outputs a Single-Page Application (SPA).
+  distDir: './dist', // Changes the build output directory to `./dist/`.
+};
+
+export default nextConfig;