Setup the Project

.eslintrc.json

@@ -1,3 +1,21 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["airbnb", "airbnb-typescript", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["prettier"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error",
+    "linebreak-style": 0,
+    "@typescript-eslint/semi": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-props-no-spreading": "off"
+  }
 }

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "semi": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "jsxBracketSameLine": true,
+  "arrowParens": "always"
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  // Add those two lines:
+  "editor.formatOnSave": true, // Tell VSCode to format files on save
+  "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter
+}

README.md

@@ -1,8 +1,12 @@
-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).
+This is a [Next.js](https://nextjs.org/) project for dish menus at some student food places in Munich
 
 ## Getting Started
 
-First, run the development server:
+First,intall the packages and run the development server:
+
+```bash
+npm i
+```
 
 ```bash
 npm run dev
@@ -12,23 +16,10 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[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.ts`.
-
-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.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
+## Build and export the project as a static website
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```bash
+npm run build
+# and then
+npx serve ./out
+```

lib/getStatic.js

@@ -0,0 +1,30 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import i18nextConfig from '../next-i18next.config'
+
+export const getI18nPaths = () =>
+  i18nextConfig.i18n.locales.map((lng) => ({
+    params: {
+      locale: lng,
+    },
+  }))
+
+export const getStaticPaths = () => ({
+  fallback: false,
+  paths: getI18nPaths(),
+})
+
+export async function getI18nProps(ctx, ns = ['common']) {
+  const locale = ctx?.params?.locale
+  let props = {
+    ...(await serverSideTranslations(locale, ns)),
+  }
+  return props
+}
+
+export function makeStaticProps(ns = []) {
+  return async function getStaticProps(ctx) {
+    return {
+      props: await getI18nProps(ctx, ns),
+    }
+  }
+}

lib/languageDetector.js

@@ -0,0 +1,7 @@
+import languageDetector from 'next-language-detector'
+import i18nextConfig from '../next-i18next.config'
+
+export default languageDetector({
+  supportedLngs: i18nextConfig.i18n.locales,
+  fallbackLng: i18nextConfig.i18n.defaultLocale,
+})

lib/redirect.js

@@ -0,0 +1,34 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import languageDetector from './languageDetector'
+
+export const useRedirect = (to) => {
+  const router = useRouter()
+  to = to || router.asPath
+
+  // language detection
+  useEffect(() => {
+    const detectedLng = languageDetector.detect()
+    if (to.startsWith('/' + detectedLng) && router.route === '/404') {
+      // prevent endless loop
+      router.replace('/' + detectedLng + router.route)
+      return
+    }
+
+    languageDetector.cache(detectedLng)
+    router.replace('/' + detectedLng + to)
+  })
+
+  return <></>
+}
+
+export const Redirect = () => {
+  useRedirect()
+  return <></>
+}
+
+// eslint-disable-next-line react/display-name
+export const getRedirect = (to) => () => {
+  useRedirect(to)
+  return <></>
+}

next-i18next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'de',
+    locales: ['en', 'de'],
+    localeDetection: true,
+  },
+}

next.config.js

@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+
+module.exports = {
   reactStrictMode: true,
   swcMinify: true,
 }
-
-module.exports = nextConfig