Update starter to use app router

.env.dist

@@ -1,3 +1,3 @@
-FLOTIQ_API_URL=https://api.flotiq.com
+NEXT_PUBLIC_FLOTIQ_API_URL=https://api.flotiq.com
 FLOTIQ_API_KEY=
 NEXT_PUBLIC_GA_ID=123

.eslintrc.json

@@ -1,27 +1,3 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true
-    },
-    "extends": [
-        "plugin:react/recommended",
-        "airbnb",
-        "next"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 2018,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-    }
+  "extends": "next/core-web-vitals"
 }

.github/workflows/pull_requests.yml

@@ -26,7 +26,7 @@ jobs:
       - run: yarn build
         env:
           FLOTIQ_API_KEY: ${{ secrets.FLOTIQ_API_KEY }}
-          FLOTIQ_API_URL: ${{ secrets.FLOTIQ_API_URL }}
+          NEXT_PUBLIC_FLOTIQ_API_URL: ${{ secrets.NEXT_PUBLIC_FLOTIQ_API_URL }}
   dependabot:
     needs: test-build
     runs-on: ubuntu-latest

.github/workflows/push.yml

@@ -27,5 +27,5 @@ jobs:
       - run: yarn build
         env:
           FLOTIQ_API_KEY: ${{ secrets.FLOTIQ_API_KEY }}
-          FLOTIQ_API_URL: ${{ secrets.FLOTIQ_API_URL }}
+          NEXT_PUBLIC_FLOTIQ_API_URL: ${{ secrets.NEXT_PUBLIC_FLOTIQ_API_URL }}
 

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -25,14 +26,15 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel
 
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
 # IDE
 .idea
+.vscode

.prettierrc

@@ -1,6 +1,6 @@
 {
   "endOfLine": "lf",
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "tabWidth": 4,
   "trailingComma": "es5"

README.md

@@ -8,6 +8,8 @@ Next JS starter for blog with Flotiq source
 Kick off your project with this blog boilerplate. This starter ships with the main Next JS configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
 Check our live demo: [https://flotiq-nextjs-blog-1.netlify.app](https://flotiq-nextjs-blog-1.netlify.app) 
 
+On the main branch, you can see a project based on the Next.js app router. This setup leverages the latest routing capabilities provided by Next.js, offering improved performance and flexibility. On the `page-router` branch, there is a starter that uses an older version of routing, specifically the page router. This version might be more familiar to those who have worked with previous iterations of Next.js.
+
 ## Quick start
 
 1. **Start the project from template using npx**

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

netlify.toml

@@ -1,3 +1,3 @@
 [template.environment]
-  FLOTIQ_API_URL="https://api.flotiq.com"
+  NEXT_PUBLIC_FLOTIQ_API_URL="https://api.flotiq.com"
   FLOTIQ_API_KEY="YOUR FLOTIQ API KEY"

next.config.mjs

@@ -0,0 +1,16 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    transpilePackages: ['flotiq-components-react'],
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'api.flotiq.com',
+                port: '',
+                pathname: '/image/**',
+            },
+        ],
+    },
+};
+
+export default nextConfig;