#26: general front page

next/src/components/blocks/layout.tsx

@@ -9,32 +9,33 @@ type LayoutProps = {
     children: any
 };
 
-const Layout: FunctionComponent<LayoutProps> = ({ siteTitle, children }: LayoutProps) => {
+const Layout: FunctionComponent<LayoutProps> = ({siteTitle, children}: LayoutProps) => {
 
-  return (
-    <>
-      <Header siteTitle={siteTitle} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0 1.0875rem 1.45rem`,
-        }}
-      >
-        <main>{children}</main>
+    return (
+        <>
+            <Header siteTitle={siteTitle}/>
+            <div
+                style={{
+                    margin: `0 auto`,
+                    maxWidth: 960,
+                    padding: `0 1.0875rem 1.45rem`,
+                }}
+            >
+                <main>{children}</main>
 
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <Link href="https://nextjs.org"><a>Next.js</a></Link>
-          {` `}
-          Powered by
-          {` `}
-          <Link href="https://enonic.com"><a>Enonic XP</a></Link>
-        </footer>
-      </div>
-    </>
-  )
+                <footer>
+                    <br/>
+                    © {new Date().getFullYear()}, Built with
+                    {` `}
+                    <Link href="https://nextjs.org"><a>Next.js</a></Link>
+                    {` `}
+                    Powered by
+                    {` `}
+                    <Link href="https://enonic.com"><a>Enonic XP</a></Link>
+                </footer>
+            </div>
+        </>
+    )
 }
 
 export default Layout;

next/src/pages/_app.tsx

@@ -5,7 +5,7 @@ import SEO from '../components/blocks/seo'
 
 function MyApp({Component, pageProps}: AppProps) {
     return (
-        <Layout siteTitle="Enonic ❤ NextJS">
+        <Layout siteTitle="Enonic ❤ Next.js">
             <SEO title={pageProps.title} siteTitle="NextXP Poc" />
             <Component {...pageProps} />
         </Layout>

next/src/pages/index.tsx

@@ -0,0 +1,41 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import styles from "../styles/Home.module.css";
+
+import xpShield from '../public/images/xp-shield.svg';
+import React from "react";
+
+export default function Home() {
+    return (
+        <div className={styles.container}>
+            <main className={styles.main}>
+                <h1 className={styles.title}>Enonic ❤ Next.js</h1>
+                <p>Welcome to the Enonic XP + <a href="https://nextjs.org">Next.js</a> proof of concept!</p>
+
+                <Image src={xpShield}
+                       width={156}
+                       height={300}
+                       alt={"Enonic XP logo"}
+                />
+
+                <section>
+                    <h2>Browsing</h2>
+                    <p>If this app is hooked up to a running XP instance
+                        (see <em>src/enonic-connection-config.js</em>), you can already browse content item data in
+                        this app. Go to the <pre style={{display: 'inline'}}>_path</pre> of a content item:
+                    </p>
+                    <p>/_draft/<em>&lt;site/path/to/item&gt;</em></p>
+                    <p>Of course, just replace '_draft' with '_master' to view published content.</p>
+                </section>
+
+                <section>
+                    <h2>Get started</h2>
+                    <p>The data browsing is a general view that uses a generic guillotine query and shared react component. Check out <strong
+                        style={{color: 'green'}}>the docs</strong> for how to tailor your own queries and react
+                        components to fetch and render content from XP, by content type.</p>
+                </section>
+            </main>
+        </div>
+    );
+}