learnnextjs-demo

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // IntelliSense を使用して利用可能な属性を学べます。
+  // 既存の属性の説明をホバーして表示します。
+  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

package.json

@@ -3,15 +3,19 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "next"
+    "dev": "node server.js",
+    "build": "next build",
+    "start": "next start -p $PORT"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "express": "^4.17.1",
+    "isomorphic-unfetch": "^3.1.0",
     "next": "^6.1.1",
     "react": "^16.4.2",
-    "react-dom": "^16.4.2"
+    "react-dom": "^16.4.2",
+    "react-markdown": "^5.0.3"
   }
 }

pages/about.js

@@ -2,6 +2,6 @@ import Layout from '../components/MyLayout.js'
 
 export default () => (
     <Layout>
-       <p>This is the about page</p>
+        <p>This is the about page</p>
     </Layout>
 )

pages/index.js

@@ -1,7 +1,158 @@
+// import Layout from '../components/MyLayout.js'
+// import Link from 'next/link'
+// import fetch from 'isomorphic-unfetch'
+
+// const Index = (props) => (
+// <Layout>
+//     <h1>Batman TV Shows</h1>
+//     <ul>
+//     {props.shows.map(({show}) => (
+//         <li key={show.id}>
+//         <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}>
+//             <a>{show.name}</a>
+//         </Link>
+//         </li>
+//     ))}
+//     </ul>
+// </Layout>
+// )
+
+// Index.getInitialProps = async function() {
+//     const res = await fetch('https://api.tvmaze.com/search/shows?q=batman')
+//     const data = await res.json()
+
+//     console.log(`Show data fetched. Count: ${data.length}`)
+
+//     return {
+//     shows: data
+//     }
+// }
+
+// export default Index
+
+
+// import Layout from '../components/MyLayout.js'
+// import Link from 'next/link'
+
+// function getPosts () {
+// return [
+//     { id: 'hello-nextjs', title: 'Hello Next.js'},
+//     { id: 'learn-nextjs', title: 'Learn Next.js is awesome'},
+//     { id: 'deploy-nextjs', title: 'Deploy apps with ZEIT'},
+// ]
+// }
+
+// export default () => (
+// <Layout>
+//     <h1>My Blog</h1>
+//     <ul>
+//     {getPosts().map((post) => (
+//     <li key={post.id}>
+//         <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}>
+//         <a>{post.title}</a>
+//         </Link>
+//         </li>
+//     ))}
+//     </ul>
+//     <style jsx>{`
+//     h1, a {
+//     font-family: "Arial";
+//     }
+
+//     ul {
+//     padding: 0;
+//     }
+
+//     li {
+//     list-style: none;
+//     margin: 5px 0;
+//     }
+
+//     a {
+//     text-decoration: none;
+//     color: blue;
+//     }
+
+//     a:hover {
+//     opacity: 0.6;
+//     }
+//     `}</style>
+// </Layout>
+// )
+
 import Layout from '../components/MyLayout.js'
+import Link from 'next/link'
+
+function getPosts () {
+  return [
+    { id: 'hello-nextjs', title: 'Hello Next.js'},
+    { id: 'learn-nextjs', title: 'Learn Next.js is awesome'},
+    { id: 'deploy-nextjs', title: 'Deploy apps with ZEIT'},
+  ]
+}
+
+// const PostLink = ({ post }) => (
+//   <li>
+//     <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}>
+//       <a>{post.title}</a>
+//     </Link>
+//   </li>
+// )
+
+const PostLink = ({ post }) => (
+    <li>
+        <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}>
+        <a>{post.title}</a>
+        </Link>
+    <style jsx>{`
+        li {
+        list-style: none;
+        margin: 5px 0;
+        }
+
+        a {
+        text-decoration: none;
+        color: blue;
+        font-family: "Arial";
+        }
+
+        a:hover {
+        opacity: 0.6;
+        }
+    `}</style>
+    </li>
+)
 
 export default () => (
-    <Layout>
-       <p>Hello Next.js</p>
-    </Layout>
+<Layout>
+    <h1>My Blog</h1>
+    <ul>
+    {getPosts().map((post) => (
+        <PostLink key={post.id} post={post}/>
+    ))}
+    </ul>
+    <style jsx>{`
+    h1 {
+        font-family: "Arial";
+    }
+
+    ul {
+        padding: 0;
+    }
+
+    // li {
+    // list-style: none;
+    // margin: 5px 0;
+    // }
+
+    // a {
+    // text-decoration: none;
+    // color: blue;
+    // }
+
+    // a:hover {
+    // opacity: 0.6;
+    // }
+    `}</style>
+</Layout>
 )

pages/post.js

@@ -0,0 +1,76 @@
+// import {withRouter} from 'next/router'
+// import Layout from '../components/MyLayout.js'
+
+// const Page = withRouter((props) => (
+//     <Layout>
+//       <h1>{props.router.query.title}</h1>
+//       <p>This is the blog post content.</p>
+//     </Layout>
+// ))
+
+// export default Page
+
+// import Layout from '../components/MyLayout.js'
+// import fetch from 'isomorphic-unfetch'
+
+// const Post =  (props) => (
+//     <Layout>
+//       <h1>{props.show.name}</h1>
+//       <p>{props.show.summary.replace(/<[/]?p>/g, '')}</p>
+//       <img src={props.show.image.medium}/>
+//     </Layout>
+// )
+
+// Post.getInitialProps = async function (context) {
+//   const { id } = context.query
+//   const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
+//   const show = await res.json()
+
+//   console.log(`Fetched show: ${show.name}`)
+
+//   return { show }
+// }
+
+// export default Post
+
+
+import Layout from '../components/MyLayout.js'
+import {withRouter} from 'next/router'
+import Markdown from 'react-markdown'
+
+export default withRouter((props) => (
+  <Layout>
+  <h1>{props.router.query.title}</h1>
+  <div className="markdown">
+    <Markdown source={`
+This is our blog post.
+Yes. We can have a [link](/link).
+And we can have a title as well.
+
+### This is a title
+
+And here's the content.
+    `}/>
+  </div>
+  <style jsx global>{`
+    .markdown {
+      font-family: 'Arial';
+    }
+
+    .markdown a {
+      text-decoration: none;
+      color: blue;
+    }
+
+    .markdown a:hover {
+      opacity: 0.6;
+    }
+
+    .markdown h3 {
+      margin: 0;
+      padding: 0;
+      text-transform: uppercase;
+    }
+  `}</style>
+  </Layout>
+))

server.js

@@ -0,0 +1,38 @@
+const express = require('express')
+const next = require('next')
+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare()
+.then(() => {
+  const server = express()
+
+  // server.get('/p/:id', (req, res) => {
+  //   const actualPage = '/post'
+  //   const queryParams = { title: req.params.id } 
+  //   app.render(req, res, actualPage, queryParams)
+  // })
+
+  server.get('/p/:id', (req, res) => {
+    const actualPage = '/post'
+    const queryParams = { id: req.params.id }
+    app.render(req, res, actualPage, queryParams)
+  })
+
+
+  server.get('*', (req, res) => {
+    return handle(req, res)
+  })
+
+  server.listen(3000, (err) => {
+    if (err) throw err
+    console.log('> Ready on http://localhost:3000')
+  })
+})
+.catch((ex) => {
+  console.error(ex.stack)
+  process.exit(1)
+})
+