Post page template

[00:00 - 00:18] Post page template. In our first take on this page, we won't render any content . Instead, we'll ensure that we can get an ID of the post to load it from the server later. To create a page that will have a dynamic route segment in its path, in our case it's going to be the post ID, we'll need to add the brackets to the pages file name.

[00:19 - 00:32] Create a new folder, post, and there create a file ID in square brackets, TSX. Now ID is going to be available through the query that we'll get using the use router provided by Next.

[00:33 - 00:59] Define the post page, post is a functional component, we'll export it as a default member of the module, export, default, post, and then inside of this page, we'll get the path name and query, path name query from use router. Return a div inside of which we'll render the path name, we'll get it from the path name at the line break here, and the post ID.

[01:00 - 01:15] It's going to be a field on query object. Now let's try to launch the app and see what it renders. Yarn, div, if you open the website and then try to open the post, you should see path name, post and then ID in the square brackets.

[01:16 - 01:24] And then as in our URL, the ID query is example, you should see it as a post ID on the rendered page. Great, now we have the post page.