Post page template
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[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.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)