Next.js Quick Start Guide

Dynamic routing

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:

1. Let's start with a small data source stub:

      // data/posts.js      export default [          {title: 'Foo'},          {title: 'Bar'},          {title: 'Baz'},          {title: 'Qux'}      ];

2. 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={{pathname: '/second', query: {id: index}}}>                        <a>{post.title}</a>                    </Link>                </li>            ))}        </ul>    </div>);

Here, we imported the data source and iterated over it to produce ...