diff --git a/package.json b/package.json
index 9145f23a..0a7db16d 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "eslint-check": "eslint-config-prettier src/index.js",
     "build": "babel src -d lib --ignore '*.test.js'",
     "watch": "babel --watch src -d lib --ignore '*.test.js'",
-    "test-gen": "rm -rf ./tmp && yarn build && ./lib/index.js https://demo.api-platform.com ./tmp/react -g react && ./lib/index.js https://demo.api-platform.com ./tmp/react-native -g react-native && ./lib/index.js https://demo.api-platform.com ./tmp/vue -g vue",
+    "test-gen": "rm -rf ./tmp && yarn build && ./lib/index.js https://demo.api-platform.com ./tmp/react -g react && ./lib/index.js https://demo.api-platform.com ./tmp/react-native -g react-native && ./lib/index.js https://demo.api-platform.com ./tmp/next -g next && ./lib/index.js https://demo.api-platform.com ./tmp/vue -g vue",
     "test-gen-custom": "rm -rf ./tmp && yarn build && babel src/generators/ReactGenerator.js src/generators/BaseGenerator.js -d ./tmp/gens && cp -r ./templates/react ./templates/react-common ./templates/entrypoint.js ./tmp/gens && ./lib/index.js https://demo.api-platform.com ./tmp/react-custom -g \"$(pwd)/tmp/gens/ReactGenerator.js\" -t ./tmp/gens",
     "test-gen-swagger": "rm -rf ./tmp && yarn build && ./lib/index.js  https://demo.api-platform.com/docs.json ./tmp/react -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/react-native -g react-native -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/vue -g vue -f swagger",
     "test-gen-env": "rm -rf ./tmp && yarn build && API_PLATFORM_CLIENT_GENERATOR_ENTRYPOINT=https://demo.api-platform.com API_PLATFORM_CLIENT_GENERATOR_OUTPUT=./tmp ./lib/index.js"
diff --git a/src/generators/BaseGenerator.js b/src/generators/BaseGenerator.js
index 7409ca0f..c621fc26 100644
--- a/src/generators/BaseGenerator.js
+++ b/src/generators/BaseGenerator.js
@@ -37,10 +37,10 @@ export default class {
     }
   }
 
-  createFileFromPattern(pattern, dir, lc, context) {
+  createFileFromPattern(pattern, dir, value, context, templateValue = "foo") {
     this.createFile(
-      sprintf(pattern, "foo"),
-      sprintf(`${dir}/${pattern}`, lc),
+      sprintf(pattern, templateValue),
+      sprintf(`${dir}/${pattern}`, value),
       context
     );
   }
diff --git a/src/generators/NextGenerator.js b/src/generators/NextGenerator.js
index 5909c447..d0893521 100644
--- a/src/generators/NextGenerator.js
+++ b/src/generators/NextGenerator.js
@@ -1,4 +1,6 @@
 import chalk from "chalk";
+import handlebars from "handlebars";
+import hbh_comparison from "handlebars-helpers/lib/comparison";
 import BaseGenerator from "./BaseGenerator";
 
 export default class NextGenerator extends BaseGenerator {
@@ -15,8 +17,9 @@ export default class NextGenerator extends BaseGenerator {
       "components/foo/Form.tsx",
 
       // types
-      "types/Collection.ts",
+      "types/collection.ts",
       "types/foo.ts",
+      "types/item.ts",
 
       // pages
       "pages/foos/[id]/index.tsx",
@@ -28,6 +31,8 @@ export default class NextGenerator extends BaseGenerator {
       "utils/dataAccess.ts",
       "utils/mercure.ts",
     ]);
+
+    handlebars.registerHelper("compare", hbh_comparison.compare);
   }
 
   help(resource) {
@@ -66,22 +71,25 @@ export default class NextGenerator extends BaseGenerator {
 
     // Copy with patterned name
     this.createDir(`${dir}/components/${context.lc}`);
-    this.createDir(`${dir}/pages/${context.lc}s`);
-    this.createDir(`${dir}/pages/${context.lc}s/[id]`);
+    this.createDir(`${dir}/pages/${context.name}`);
+    this.createDir(`${dir}/pages/${context.name}/[id]`);
     [
       // components
       "components/%s/List.tsx",
       "components/%s/Show.tsx",
       "components/%s/Form.tsx",
-
-      // pages
-      "pages/%ss/[id]/index.tsx",
-      "pages/%ss/[id]/edit.tsx",
-      "pages/%ss/index.tsx",
-      "pages/%ss/create.tsx",
     ].forEach((pattern) =>
       this.createFileFromPattern(pattern, dir, context.lc, context)
     );
+    [
+      // pages
+      "pages/%s/[id]/index.tsx",
+      "pages/%s/[id]/edit.tsx",
+      "pages/%s/index.tsx",
+      "pages/%s/create.tsx",
+    ].forEach((pattern) =>
+      this.createFileFromPattern(pattern, dir, context.name, context, "foos")
+    );
 
     // interface pattern should be camel cased
     this.createFile("types/foo.ts", `${dir}/types/${context.ucf}.ts`, context);
@@ -93,7 +101,8 @@ export default class NextGenerator extends BaseGenerator {
       "components/common/ReferenceLinks.tsx",
 
       // types
-      "types/Collection.ts",
+      "types/collection.ts",
+      "types/item.ts",
 
       // utils
       "utils/dataAccess.ts",
diff --git a/src/generators/NextGenerator.test.js b/src/generators/NextGenerator.test.js
index 292582c6..d5cb08f3 100644
--- a/src/generators/NextGenerator.test.js
+++ b/src/generators/NextGenerator.test.js
@@ -25,7 +25,7 @@ describe("generate", () => {
         description: "An URL",
       }),
     ];
-    const resource = new Resource("abc", "http://example.com/foos", {
+    const resource = new Resource("abcs", "http://example.com/foos", {
       id: "abc",
       title: "abc",
       readableFields: fields,
@@ -46,7 +46,8 @@ describe("generate", () => {
       "/components/common/ReferenceLinks.tsx",
       "/components/common/Pagination.tsx",
       "/types/Abc.ts",
-      "/types/Collection.ts",
+      "/types/collection.ts",
+      "/types/item.ts",
       "/pages/abcs/[id]/index.tsx",
       "/pages/abcs/[id]/edit.tsx",
       "/pages/abcs/index.tsx",
diff --git a/templates/next/components/common/Pagination.tsx b/templates/next/components/common/Pagination.tsx
index 17dac045..dd316809 100644
--- a/templates/next/components/common/Pagination.tsx
+++ b/templates/next/components/common/Pagination.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { PagedCollection } from "../../types/Collection";
+import { PagedCollection } from "../../types/collection";
 
 interface Props {
   collection: PagedCollection<unknown>;
diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx
index 83472f45..6625ac11 100644
--- a/templates/next/components/foo/Form.tsx
+++ b/templates/next/components/foo/Form.tsx
@@ -74,13 +74,18 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
               <input
                 name="{{name}}"
                 id="{{lc}}_{{name}}"
-                value={ values.{{name}} ?? "" }
+                {{#compare type "==" "dateTime" }}
+                value={values.{{name}}?.toLocaleString() ?? ""}
+                {{/compare}}
+                {{#compare type "!=" "dateTime" }}
+                value={values.{{name}} ?? ""}
+                {{/compare}}
                 type="{{type}}"
                 {{#if step}}step="{{{step}}}"{{/if}}
                 placeholder="{{{description}}}"
                 {{#if required}}required={true}{{/if}}
                 className={`form-control${errors.{{name}} && touched.{{name}} ? ' is-invalid' : ''}`}
-                aria-invalid={errors.{{name}} && touched.{{name~}} }
+                aria-invalid={errors.{{name}} && touched.{{name~}} ? 'true' : null}
                 onChange={handleChange}
                 onBlur={handleBlur}
               />
diff --git a/templates/next/components/foo/Show.tsx b/templates/next/components/foo/Show.tsx
index ef89523b..6aa0d5db 100644
--- a/templates/next/components/foo/Show.tsx
+++ b/templates/next/components/foo/Show.tsx
@@ -1,16 +1,17 @@
-import { FunctionComponent, useState } from 'react';
-import Link from 'next/link';
+import { FunctionComponent, useState } from "react";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import Head from "next/head";
 import { fetch } from "../../utils/dataAccess";
-import ReferenceLinks from '../common/ReferenceLinks';
-import { {{{ucf}}} } from '../../types/{{{ucf}}}';
-import Head from 'next/head'
+import ReferenceLinks from "../common/ReferenceLinks";
+import { {{{ucf}}} } from "../../types/{{{ucf}}}";
 
 interface Props {
   {{{lc}}}: {{{ucf}}};
+  text: string;
 }
 
-export const Show: FunctionComponent<Props> = ({ {{{lc}}} }) => {
+export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
   const [error, setError] = useState(null);
   const router = useRouter();
 
@@ -30,11 +31,7 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}} }) => {
     <div>
        <Head>
             <title>{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</title>
-            <script
-                type="application/ld+json"
-            >
-              {text}
-            </script>
+            <script type="application/ld+json" dangerouslySetInnerHTML={ { __html: text } } />
           </Head>
       <h1>{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</h1>
       <table className="table table-responsive table-striped table-hover">
diff --git a/templates/next/pages/foos/[id]/edit.tsx b/templates/next/pages/foos/[id]/edit.tsx
index f052a1a0..2e9541a7 100644
--- a/templates/next/pages/foos/[id]/edit.tsx
+++ b/templates/next/pages/foos/[id]/edit.tsx
@@ -1,9 +1,9 @@
 import { GetStaticPaths, GetStaticProps, NextComponentType, NextPageContext } from "next";
-import { Form } from "../../../components/{{{lc}}}/Form";
-import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
-import { fetch } from "../../../utils/dataAccess";
 import Head from "next/head";
 import DefaultErrorPage from "next/error";
+import { Form } from "../../../components/{{{lc}}}/Form";
+import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
+import { fetch, getPaths } from "../../../utils/dataAccess";
 
 interface Props {
   {{{lc}}}: {{{ucf}}};
@@ -27,43 +27,19 @@ const Page: NextComponentType<NextPageContext, Props, Props> = ({ {{{lc}}} }) =>
 };
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const response = await fetch(`/{{{name}}}/${params.id}`);
+
   return {
     props: {
-      {{{lc}}}: await fetch(`/{{{name}}}/${params.id}`),
+      {{{lc}}}: response.data,
     },
     revalidate: 1,
   };
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  try {
-    const response = await fetch("/{{{name}}}");
-  } catch (e) {
-    console.error(e);
-
-    return {
-      paths: [],
-      fallback: true,
-    };
-  }
-
-  const view = response.data['{{{hydraPrefix}}}view'];
-  const paths = response.data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }/edit`);
-
-  if (view) {
-    try {
-      const {
-        '{{{hydraPrefix}}}last': last
-      } = view;
-      for (let page = 2; page <= parseInt(last.replace(/^\/{{{name}}}\?page=(\d+)/, '$1')); page++) {
-        paths.concat(
-          await fetch(`/{{{name}}}?page=${page}`).data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }/edit`)
-        );
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
+  const response = await fetch("/{{{name}}}");
+  const paths = await getPaths(response, "{{{name}}}", true);
 
   return {
     paths,
diff --git a/templates/next/pages/foos/[id]/index.tsx b/templates/next/pages/foos/[id]/index.tsx
index 8af2d4f2..64d5495f 100644
--- a/templates/next/pages/foos/[id]/index.tsx
+++ b/templates/next/pages/foos/[id]/index.tsx
@@ -1,20 +1,21 @@
 import { GetStaticPaths, GetStaticProps, NextComponentType, NextPageContext } from "next";
-import { Show } from "../../../components/{{{lc}}}/Show";
-import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
-import { fetch } from "../../../utils/dataAccess";
 import Head from "next/head";
 import DefaultErrorPage from "next/error";
+import { Show } from "../../../components/{{{lc}}}/Show";
+import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
+import { fetch, getPaths } from "../../../utils/dataAccess";
 import { useMercure } from "../../../utils/mercure";
 
 interface Props {
   {{{lc}}}: {{{ucf}}};
   hubURL: null | string;
+  text: string;
 };
 
-const Page: NextComponentType<NextPageContext, Props, Props> = (props) => {
-  const {{{lc}}} = props.hubURL === null ? props.{{{lc}}} : useMercure(props.{{{lc}}}, props.hubURL);
+const Page: NextComponentType<NextPageContext, Props, Props> = ({ {{{lc}}}, hubURL, text }) => {
+  const {{{lc}}}Data = useMercure({{{lc}}}, hubURL);
 
-  if (!{{{lc}}}) {
+  if (!{{{lc}}}Data) {
     return <DefaultErrorPage statusCode={404} />;
   }
 
@@ -25,7 +26,7 @@ const Page: NextComponentType<NextPageContext, Props, Props> = (props) => {
           <title>{`Show {{{ucf}}} ${ {{~lc}}['@id'] }`}</title>
         </Head>
       </div>
-      <Show {{{lc}}}={ {{{lc}}} } text={ props.text } />
+      <Show {{{lc}}}={ {{{lc}}}Data } text={text} />
     </div>
   );
 };
@@ -44,34 +45,8 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  try {
-    const response = await fetch("/{{{name}}}");
-  } catch (e) {
-    console.error(e);
-
-    return {
-      paths: [],
-      fallback: true,
-    };
-  }
-
-  const view = response.data['{{{hydraPrefix}}}view'];
-  const paths = response.data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }`);
-
-  if (view) {
-    try {
-      const {
-        '{{{hydraPrefix}}}last': last
-      } = view;
-      for (let page = 2; page <= parseInt(last.replace(/^\/{{{name}}}\?page=(\d+)/, '$1')); page++) {
-        paths.concat(
-          await fetch(`/{{{name}}}?page=${page}`).data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }`)
-      );
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
+  const response = await fetch("/{{{name}}}");
+  const paths = await getPaths(response, "{{{name}}}", false);
 
   return {
     paths,
diff --git a/templates/next/pages/foos/create.tsx b/templates/next/pages/foos/create.tsx
index 7402cf38..9a5c8dff 100644
--- a/templates/next/pages/foos/create.tsx
+++ b/templates/next/pages/foos/create.tsx
@@ -1,6 +1,6 @@
 import { NextComponentType, NextPageContext } from "next";
-import { Form } from "../../components/{{{lc}}}/Form";
 import Head from "next/head";
+import { Form } from "../../components/{{{lc}}}/Form";
 
 const Page: NextComponentType<NextPageContext> = () => (
   <div>
diff --git a/templates/next/pages/foos/index.tsx b/templates/next/pages/foos/index.tsx
index 05da56c6..5f70eff5 100644
--- a/templates/next/pages/foos/index.tsx
+++ b/templates/next/pages/foos/index.tsx
@@ -1,15 +1,15 @@
 import { GetServerSideProps, NextComponentType, NextPageContext } from "next";
+import Head from "next/head";
 import { List } from "../../components/{{{lc}}}/List";
-import { PagedCollection } from "../../types/Collection";
+import { PagedCollection } from "../../types/collection";
 import { {{{ucf}}} } from "../../types/{{{ucf}}}";
 import { fetch } from "../../utils/dataAccess";
-import Head from "next/head";
 import Pagination from "../../components/common/Pagination";
 import { useMercure } from "../../utils/mercure";
 
 interface Props {
   collection: PagedCollection<{{{ucf}}}>;
-  hubURL: string;
+  hubURL: string | null;
 }
 
 const Page: NextComponentType<NextPageContext, Props, Props> = (props) => {
diff --git a/templates/next/types/Collection.ts b/templates/next/types/collection.ts
similarity index 65%
rename from templates/next/types/Collection.ts
rename to templates/next/types/collection.ts
index ba59f00c..5e41071f 100644
--- a/templates/next/types/Collection.ts
+++ b/templates/next/types/collection.ts
@@ -1,3 +1,5 @@
+import has from "lodash/has"
+
 export interface PagedCollection<T> {
   "@context"?: string;
   "@id"?: string;
@@ -10,3 +12,6 @@ export interface PagedCollection<T> {
   "{{{hydraPrefix}}}search"?: object;
   "{{{hydraPrefix}}}totalItems"?: number;
 }
+
+export const isPagedCollection = <T>(data: any): data is PagedCollection<T> =>
+  has(data, "{{{hydraPrefix}}}member") && Array.isArray(data["{{{hydraPrefix}}}member"])
diff --git a/templates/next/types/item.ts b/templates/next/types/item.ts
new file mode 100644
index 00000000..0ecf7190
--- /dev/null
+++ b/templates/next/types/item.ts
@@ -0,0 +1,3 @@
+import has from "lodash/has"
+
+export const isItem = <T>(data: any): data is T => has(data, "@id")
diff --git a/templates/next/utils/dataAccess.ts b/templates/next/utils/dataAccess.ts
index fa929028..8ce513ff 100644
--- a/templates/next/utils/dataAccess.ts
+++ b/templates/next/utils/dataAccess.ts
@@ -36,12 +36,13 @@ export const fetch = async (id: string, init: RequestInit = {}) => {
   const resp = await isomorphicFetch(ENTRYPOINT + id, init);
   if (resp.status === 204) return;
 
-  const json = await resp.json();
+  const text = await resp.text();
+  const json = JSON.parse(text);
   if (resp.ok) {
     return {
-      hubURL: extractHubURL(resp)?.toString(), // URL cannot be serialized as JSON, must be sent as string
+      hubURL: extractHubURL(resp)?.toString() || null, // URL cannot be serialized as JSON, must be sent as string
       data: normalize(json),
-      text: await resp.text(),
+      text,
     };
   }
 
@@ -57,7 +58,7 @@ export const fetch = async (id: string, init: RequestInit = {}) => {
   throw { defaultErrorMsg, status, fields };
 };
 
-export const normalize = (data: unknown) => {
+export const normalize = (data: any) => {
   if (has(data, "{{{hydraPrefix}}}member")) {
     // Normalize items in collections
     data["{{{hydraPrefix}}}member"] = data[
@@ -74,3 +75,26 @@ export const normalize = (data: unknown) => {
       : get(value, "@id", value)
   );
 };
+
+export const getPaths = async (response, resourceName: string, isEdit: boolean) => {
+  try {
+    const pathSuffix = isEdit ? "/edit" : "";
+    const view = response.data["{{{hydraPrefix}}}view"];
+    const paths = response.data["{{{hydraPrefix}}}member"].map((resourceData) => `${resourceData['@id']}${pathSuffix}`);
+
+    if (view) {
+      const { '{{{hydraPrefix}}}last': last } = view;
+      for (let page = 2; page <= parseInt(last.replace(new RegExp(`^\/${resourceName}\?page=(\d+)`), "$1")); page++) {
+        paths.concat(
+          (await fetch(`/${resourceName}?page=${page}`)).data["{{{hydraPrefix}}}member"].map((resourceData) => `${ resourceData['@id'] }${pathSuffix}`)
+        );
+      }
+    }
+
+    return paths;
+  } catch (e) {
+    console.error(e);
+
+    return [];
+  }
+};
diff --git a/templates/next/utils/mercure.ts b/templates/next/utils/mercure.ts
index 78db99bc..8f0419d9 100644
--- a/templates/next/utils/mercure.ts
+++ b/templates/next/utils/mercure.ts
@@ -1,9 +1,9 @@
-import has from "lodash/has";
 import { useEffect, useState } from "react";
-import { PagedCollection } from "../types/Collection";
+import { PagedCollection, isPagedCollection } from "../types/collection";
+import { isItem } from "../types/item";
 import { normalize } from "./dataAccess";
 
-const mercureSubscribe = (hubURL: string, data: unknown | PagedCollection<unknown>, setData: (data: unknown) => void) => {
+const mercureSubscribe = <T>(hubURL: string, data: T | PagedCollection<T>, setData: (data: T) => void) => {
   const url = new URL(hubURL, window.origin);
   url.searchParams.append("topic", (new URL(data["@id"], window.origin)).toString());
   const eventSource = new EventSource(url.toString());
@@ -12,41 +12,44 @@ const mercureSubscribe = (hubURL: string, data: unknown | PagedCollection<unknow
   return eventSource;
 }
 
-export const useMercure = (deps: unknown | PagedCollection<unknown>, hubURL: string) => {
+export const useMercure = <T>(deps: T | PagedCollection<T>, hubURL: string | null) => {
   const [data, setData] = useState(deps);
 
   useEffect(() => {
     setData(deps);
   }, [deps]);
 
-  if (!data) {
-    return data;
-  }
+  useEffect(() => {
+    if (!hubURL || !data) {
+      return;
+    }
 
-  if (!has(data, "{{{hydraPrefix}}}member") && !has(data, "@id")) {
-    console.error("Object sent is not in JSON-LD format.");
+    if (!isPagedCollection(data) && !isItem(data)) {
+      console.error("Object sent is not in JSON-LD format.");
 
-    return data;
-  }
+      return;
+    }
 
-  useEffect(() => {
-    if (has(data, "{{{hydraPrefix}}}member") && Array.isArray(data["{{{hydraPrefix}}}member"]) && data["{{{hydraPrefix}}}member"].length !== 0) {
+    if (isPagedCollection(data) && data["{{{hydraPrefix}}}member"].length !== 0) {
+      const eventSources: EventSource[] = [];
       // It's a PagedCollection
-      data["{{{hydraPrefix}}}member"].forEach((obj, pos) => mercureSubscribe(hubURL, obj, (datum) => {
-        data["{{{hydraPrefix}}}member"][pos] = datum;
-        setData(data);
-      }));
-
-      return () => data;
+      data["{{{hydraPrefix}}}member"].forEach((obj, pos) => {
+        eventSources.push(mercureSubscribe(hubURL, obj, (datum: T) => {
+          data["{{{hydraPrefix}}}member"][pos] = datum;
+          setData({ ...data });
+        }));
+      });
+
+      return () => {
+        eventSources.forEach((eventSource) => eventSource.close());
+      };
     }
 
     // It's a single object
     const eventSource = mercureSubscribe(hubURL, data, setData);
 
     return () => {
-      eventSource.removeEventListener("message", (event) => setData(normalize(JSON.parse(event.data))));
-
-      return data;
+      eventSource.close();
     };
   }, [data]);