Of course, no real app can live with only static URLs based on just pages, so let's add a bit of dynamic routing to our app:
- Let's start with a small data source stub:
// data/posts.js
export default [
{title: 'Foo'},
{title: 'Bar'},
{title: 'Baz'},
{title: 'Qux'}
];
- Now, let's connect it to our index page:
// pages/index.js
import React from 'react';
import Link from "next/link";
import Nav from "../components/Nav";
import posts from "../data/posts";
export default () => (
<div>
<Nav/>
<hr/>
<ul>
{posts.map((post, index) => (
<li key={index}>
<Link href...