rsnext/examples/blog-starter
Casey Ocampo 44626ed4e5
fix(examples): dynamically update page title (#63110)
### What?


[blog-starter-kit](https://vercel.com/templates/next.js/blog-starter-kit)'s
page title does not update when navigating to a blog post.

### Why?

The `title` property was missing from:

```
return {
    title, // missing
    openGraph: {
      title,
      images: [post.ogImage.url],
    },
  };
```

Closes NEXT-[Page title is not dynamically updating #63083
](https://github.com/vercel/next.js/issues/63083)
Fixes #63083
2024-03-11 08:42:37 -07:00
..
_posts chore(examples): use default prettier for examples/templates (#60530) 2024-01-11 16:01:44 -07:00
public Replace JS blog-starter example with TS, deprecate blog-starter-typescript example (#38395) 2022-07-07 23:10:26 -05:00
src fix(examples): dynamically update page title (#63110) 2024-03-11 08:42:37 -07:00
.gitignore Add .yarn/install-state.gz to .gitignore (#56637) 2023-10-18 16:34:48 +00:00
next-env.d.ts Remove incorrect entries for pnpm debug log (#47241) 2023-03-26 22:26:05 -07:00
package.json Update blog-starter to App Router (#61170) 2024-01-30 17:16:55 +00:00
postcss.config.js Update blog-starter to App Router (#61170) 2024-01-30 17:16:55 +00:00
README.md Update blog-starter to App Router (#61170) 2024-01-30 17:16:55 +00:00
tailwind.config.ts Update blog-starter to App Router (#61170) 2024-01-30 17:16:55 +00:00
tsconfig.json Update blog-starter to App Router (#61170) 2024-01-30 17:16:55 +00:00

A statically generated blog example using Next.js, Markdown, and TypeScript

This is the existing blog-starter plus TypeScript.

This example showcases Next.js's Static Generation feature using Markdown files as the data source.

The blog posts are stored in /_posts as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post.

To create the blog posts we use remark and remark-html to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by gray-matter and also sent in props to the page.

Demo

https://next-blog-starter.vercel.app/

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

Deploy with Vercel

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example blog-starter blog-starter-app
yarn create next-app --example blog-starter blog-starter-app
pnpm create next-app --example blog-starter blog-starter-app

Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.

Deploy it to the cloud with Vercel (Documentation).

Notes

blog-starter uses Tailwind CSS (v3.0).