ready to production

components/most-watched/MostWatched.js

@@ -20,6 +20,7 @@ const MostWatched = ({ title, sectionClass, posts }) => {
               <Link
                 href={`/post/${item.id}-${item.post_title
                   .trim()
+                  .slice(0, 20)
                   .split(' ')
                   .join('-')}`}
               >

components/news-item/NewsItems.js

@@ -79,6 +79,7 @@ const NewsItems = () => {
                   <Link
                     href={`/post/${item.id}-${item.post_title
                       .trim()
+                      .slice(0, 20)
                       .split(' ')
                       .join('-')}`}
                   >

components/syria-news/SyriaNews.js

@@ -33,7 +33,11 @@ const SyriaNews = ({ posts }) => {
           <Link
             href={`/post/${
               posts.blog_post[0].id
-            }-${posts.blog_post[0].post_title.trim().split(' ').join('-')}`}
+            }-${posts.blog_post[0].post_title
+              .trim()
+              .slice(0, 20)
+              .split(' ')
+              .join('-')}`}
           >
             <a>
               <h3
@@ -62,7 +66,11 @@ const SyriaNews = ({ posts }) => {
               <Link
                 href={`/post/${
                   posts.blog_post[0].id
-                }-${posts.blog_post[0].post_title.trim().split(' ').join('-')}`}
+                }-${posts.blog_post[0].post_title
+                  .trim()
+                  .slice(0, 20)
+                  .split(' ')
+                  .join('-')}`}
               >
                 <a>
                   <Toast.Body>

package.json

@@ -3,10 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "node server.js",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",

pages/post/[id].js

@@ -46,7 +46,13 @@ export const getStaticPaths = async () => {
   const allPosts = await data.json()
 
   const paths = allPosts?.blog_post.map((post) => ({
-    params: { id: `${post.id}-${post.post_title.trim().split(' ').join('-')}` },
+    params: {
+      id: `${post.id}-${post.post_title
+        .trim()
+        .slice(0, 20)
+        .split(' ')
+        .join('-')}`,
+    },
   }))
 
   return { paths, fallback: false }

server.js

@@ -0,0 +1,37 @@
+// server.js
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
+
+const dev = process.env.NODE_ENV !== 'production'
+const hostname = 'localhost'
+const port = 3000
+// when using middleware `hostname` and `port` must be provided below
+const app = next({ dev, hostname, port })
+const handle = app.getRequestHandler()
+
+app.prepare().then(() => {
+  createServer(async (req, res) => {
+    try {
+      // Be sure to pass `true` as the second argument to `url.parse`.
+      // This tells it to parse the query portion of the URL.
+      const parsedUrl = parse(req.url, true)
+      const { pathname, query } = parsedUrl
+
+      if (pathname === '/a') {
+        await app.render(req, res, '/a', query)
+      } else if (pathname === '/b') {
+        await app.render(req, res, '/b', query)
+      } else {
+        await handle(req, res, parsedUrl)
+      }
+    } catch (err) {
+      console.error('Error occurred handling', req.url, err)
+      res.statusCode = 500
+      res.end('internal server error')
+    }
+  }).listen(port, (err) => {
+    if (err) throw err
+    console.log(`> Ready on http://${hostname}:${port}`)
+  })
+})