title: Difference(s) between getStaticPaths + getStaticProps and useRouter in NextJS?
body: <p>I'm learning NextJS and currently <strong>I don't understand the differences, and when I should use <code>getStaticProps</code> &amp; <code>getStaticPaths</code> compared to <code>useRouter().query</code></strong>.</p>
  <p>So far to me, it seems like they can do the same thing for my very simple book-listing site: getting the ID from the URL <code>e.g: &quot;localhost:3000/books/book1&quot;</code> and use that ID to fetch and display the corresponding item from a database (simulated with some async functions below)</p>
  <p>These are my 2 approaches written in <code>pages/books/[bookId].tsx</code>, and they both work.</p>
  <p><strong>Using getStaticPaths, getStaticProps</strong></p>
  <pre><code>export async function getStaticPaths() {
    const books: Book[] = await getBooksAsync();
    const paths = books.map((book) =&gt; {
      return { params: { bookId: book.id } };
    });
  
    return {
      paths,
      fallback: false,
    };
  }
  
  export async function getStaticProps(context: GetStaticPropsContext) {
    const params = context.params!;
    const bookId = params.bookId as string;
    const book = await getBookByIdAsync(bookId);
  
    return {
      props: {
        book,
      },
    };
  }
  
  const Book = ({ book }: { book: Book }) =&gt; {
    return (
      &lt;div&gt;
        &lt;p&gt;Book Id: {book.id}&lt;/p&gt;
        &lt;p&gt;Title: {book.title}&lt;/p&gt;
        &lt;p&gt;Year: {book.year}&lt;/p&gt;
        &lt;p&gt;Reviews Count: {book.reviews.length}&lt;/p&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p><strong>Using useRouter().query</strong></p>
  <pre><code>const Book = () =&gt; {
    const router = useRouter();
    const query = router.query;
    const bookId = query.bookId as string;
  
    const [book, setBook] = useState&lt;Book&gt;();
  
    useEffect(() =&gt; {
      async function getBooks() {
        const _book = await getBookByIdAsync(bookId);
        setBook(_book);
      }
  
      getBooks();
    }, [bookId]);
  
    if (!book) return &lt;&gt;&lt;/&gt;;
  
    return (
      &lt;div&gt;
        &lt;p&gt;Book Id: {book.id}&lt;/p&gt;
        &lt;p&gt;Title: {book.title}&lt;/p&gt;
        &lt;p&gt;Year: {book.year}&lt;/p&gt;
        &lt;p&gt;Reviews Count: {book.reviews.length}&lt;/p&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>