vercel / nextjs-portfolio-starter

Easily create a portfolio with Next.js and Markdown.

Portfolio Starter Kit

This portfolio is built with Next.js and a library called Nextra. It allows you to write Markdown and focus on the content of your portfolio. This starter includes:

• Automatically configured to handle Markdown/MDX
• Generates an RSS feed based on your posts
• A beautiful theme included out of the box
• Easily categorize posts with tags
• Fast, optimized web font loading

Configuration

1. Update your name in theme.config.js or change the footer.
2. Update your name and site URL for the RSS feed in scripts/gen-rss.js.
3. Update the meta tags in pages/_document.js.
4. Update the posts inside pages/posts/*.md with your own content.

Deploy your own

Deploy the example using Vercel:

How to use

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

npx create-next-app --example blog my-blog
# or
yarn create next-app --example blog my-blog

Deploy it to the cloud with Vercel (Documentation).

nextjs-portfolio-starter's Issues

Pagination?

Hey, is it possible to add pagination to a posts page for example?

Not working locally

Hi, I successfully developed the site with Vercel, but I can't clone & locally run the code.

C:UserserhaOneDriveMasaüstüportfolio	theme.config.js
Module build failed: UnhandledSchemeError: Reading from "C:UserserhaOneDriveMasaüstüportfolio	heme.config.js" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "c:" URIs.

Thanks.

h1 is not detecting

h1 element using # is not detecting.

running 'yarn upgrade'

running 'yarn upgrade' breaks this template.

Is there anyway to fix the code so I can upgrade all the packages in it?

Making title and navbar different

Hello! It seems that whatever is in the "title" field in the front matter overrides the heading (the one with a single pound sign) in "index.mdx" so that the heading and the link to the home page in the navbar are always the same.

How can I make the heading say one thing (my name) and the navbar say another thing ("About")?

images of different resolution are stretched out

This is what this image looks like

Navbar items ordering

Hi,
I am sorry if this is a stupid question, but I can't figure out how to order navbar menu items? I can't order it neither via _meta.json file.

failed to process not yet implemented: proper error reporting for wrong `@jsxRuntime`

I am getting this error while trying to build this app

failed to process not yet implemented: proper error reporting for wrong `@jsxRuntime`

Build fails when containing HTML content

I'm using this project to publish articles, automatically manage the project through vercel, and when the article contains '<>', '', I don't know if it's caused by '<>'.

Link & Redirect Problem

Hi,
Whenever I try to open the links from the home page. It opens on the same page but I want to open it in a new tab. Also, I want to upload a few of my own files on the web. So I created a new folder and put some files in there, but whenever I am trying to access them, it redirects to 404.
Can someone help?

Making the posts page index page

Is there a way to make the posts page the index default page? I believe that should be the case as this is a blogpost website.

Also what is the best way to customise the design of the pages?

Note: Not sure if nextra is still maintained

Checkify Consistently Reporting the Incorrect Runtime Version of 2021.10

I consistently see this error in the automated deployment of this template with no simple path to resolution:

Dec 26 14:26:22 - DEBUG - Starting job
Dec 26 14:26:22 - DEBUG - Compiling environment variables
Dec 26 14:26:22 - DEBUG - Creating runtime using version 2021.10
Dec 26 14:26:22 - DEBUG - Running Playwright test script
Dec 26 14:26:22 - ERROR - Playwright test is only supported in runtime 2022.02 and above.
Dec 26 14:26:22 - DEBUG - Run finished
Dec 26 14:26:22 - DEBUG - Uploading log file

Consider adding documentation on how to change this issue or where it is coming from. What runtime?

Duplicate h1 in pages/index.mdx

The .mdx page templates set the page title and h1 with title: About. The template specifies # Your Name Here, however, this causes a duplicate h1 and results in # Your Name Here to not be rendered on the page and for the page title and h1 to be whatever is specified for title: .

https://demo.vercel.blog/ seems to function as intended, replacing the set title: About with # Your Name Here, in the index.mdx page temple.

Am I missing something or is this a function of creating a meta.json in the pages/ directory?

*Note When cloning this repo, the issue is not present.

The issue IS present when installing via
yarn create next-app --example blog my-blog
or
yarn add next nextra react react-dom yarn add nextra-theme-blog

Be able to hide (or delete) "posts" link in navigation

I hope this isn't too unreasonable of a request.

I am currently using this template, but I don't intend to write posts on my site. However, any attempt to hide the link (by putting an underscore before index.md in /pages/posts/ directory) or straight up deleting the posts folder entirely would throw an error at me. The documentation for the blog theme seems very underdeveloped as well so I'm not sure if hiding the Posts link is something that can be worked on from the user side.

Thanks.

inb4 "You're using a blog theme for your site, therefore you should use it as a blog"

Tags Page

Hi, this template is very great, I'm trying to use it to build my own blog.

But I can't find a page to show all my post tags, so I try to write it, during this time, I still find nothing in both code and the Nextra document. is there a nice way to resolve it?

I couldn't able to run successfully in windows 11 Home machine

Node Version:v16.14.2
Next: Latest

After cloning the repo i ran below steps

npx create-next-app --example blog my-blog
cd my-blog
npm run dev

After running npm run dev in the logs i see a statment
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
After 2 seconds it it stopped serving. Can't find any logs in console.

Logs:

Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd my-blog
  npm run dev


D:\nextjs-portfolio-starter>cd my-blog

D:\nextjs-portfolio-starter\my-blog>npm run dev

> dev
> next

ready - started server on 0.0.0.0:3000, url: http://localhost:3000


D:\nextjs-portfolio-starter\my-blog>

Any help is appreciated. Thanks

Adding additional posts after the first half dozen or so and the posts listing page is not showing the latest posts

how to add remote images?

Command Injection Affecting lodash package, versions <4.17.21

Hello everyone. I identified that this repository uses Loadash in a version that has a security vulnerability.

Here have more information about this vulnerability > https://app.snyk.io/vuln/SNYK-JS-LODASH-1040724

In the Lodash repository there is a commit that talks about: Prevent command injection through _.template's variable option
lodash/lodash@3469357

I think that this vulnerability could jeopardize some applications that are using the NextJS Portfolio Starter.

Customize order of pages in head

Hi,

first, thanks for this project template. I have recently started to use it, and I am wondering how I can customize the order in which page links are displayed in the "head" of the blog.

When I have several pages as, for example, About, Blog, CV... How can I determine the order in which the links to these pages are displayed? I have tried to use a meta.json file as it is said in the Nextra documentation, but I get the following deployment error in this case:

Then, how I can customize this?

Many thanks for your time. Regards.

How do i add reactions, comments, paging, search into this starter?

Hi, How do i add reactions, comments, paging, search into this starter?

post reactions
comments from disqus.com
paging posts
search posts and pages

Thank you,
Truong

Unable to run locally

Right after cloning from Next website I'm unable to run this locally after running the 'next' command. I've cleaned and reinstalled many different versions of node, react, react-dom to address earlier errors, and below is the latest error that's preventing the project from running locally.

 ken@mbp  ~/Documents/GitHub/blog_next main ± next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - automatically enabled Fast Refresh for 1 custom loader
warn  - Found lockfile missing swc dependencies, patching...
warn  - Lockfile was successfully patched, please run "npm install" to ensure @next/swc dependencies are downloaded
event - compiled client and server successfully in 2.5s (176 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 186 ms (177 modules)
Error: Cannot find module 'next/dist/shared/lib/is-plain-object.js'
Require stack:
- /Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/require.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next-server.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/lib/start-server.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/cli/next-dev.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
    at Function.mod._resolveFilename (/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/build/webpack/require-hook.js:182:28)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.../shared/lib/is-plain-object (/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js:175:18)
    at __webpack_require__ (/Users/ken/Documents/GitHub/blog_next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///../../../.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/lib/is-error.js:7:22)
    at Object.../../../.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/lib/is-error.js (/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js:77:1)
    at __webpack_require__ (/Users/ken/Documents/GitHub/blog_next/.next/server/webpack-runtime.js:33:42) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/require.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next-server.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/lib/start-server.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/cli/next-dev.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/bin/next'
  ]
}
info  - automatically enabled Fast Refresh for 1 custom loader
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
Error: Failed to fetch update manifest Internal Server Error
    at http://localhost:3000/_next/static/chunks/fallback/webpack.js?ts=1658102626059:1153:37
wait  - compiling / (client and server)...
event - compiled client and server successfully in 2.3s (275 modules)
Error: Cannot find module 'next/dist/shared/lib/is-plain-object.js'
Require stack:
- /Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/require.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next-server.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/lib/start-server.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/cli/next-dev.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
    at Function.mod._resolveFilename (/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/build/webpack/require-hook.js:182:28)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.../shared/lib/is-plain-object (/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js:175:18)
    at __webpack_require__ (/Users/ken/Documents/GitHub/blog_next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///../../../.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/lib/is-error.js:7:22)
    at Object.../../../.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/lib/is-error.js (/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js:77:1)
    at __webpack_require__ (/Users/ken/Documents/GitHub/blog_next/.next/server/webpack-runtime.js:33:42) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/require.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next-server.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/lib/start-server.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/cli/next-dev.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/bin/next'
  ]
}
error - Error: Cannot find module 'next/dist/shared/lib/is-plain-object.js'
Require stack:
- /Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/require.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next-server.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/lib/start-server.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/cli/next-dev.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
    at Function.mod._resolveFilename (/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/build/webpack/require-hook.js:182:28)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.../shared/lib/is-plain-object (/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js:175:18)
    at __webpack_require__ (/Users/ken/Documents/GitHub/blog_next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///../../../.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/lib/is-error.js:7:22)
    at Object.../../../.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/lib/is-error.js (/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js:77:1)
    at __webpack_require__ (/Users/ken/Documents/GitHub/blog_next/.next/server/webpack-runtime.js:33:42) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/require.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next-server.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/lib/start-server.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/cli/next-dev.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/bin/next'
  ],
  page: '/'
}
Error: Cannot find module 'next/dist/shared/lib/is-plain-object.js'
Require stack:
- /Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/require.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next-server.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/lib/start-server.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/cli/next-dev.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
    at Function.mod._resolveFilename (/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/build/webpack/require-hook.js:182:28)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.../shared/lib/is-plain-object (/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js:175:18)
    at __webpack_require__ (/Users/ken/Documents/GitHub/blog_next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///../../../.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/lib/is-error.js:7:22)
    at Object.../../../.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/lib/is-error.js (/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js:77:1)
    at __webpack_require__ (/Users/ken/Documents/GitHub/blog_next/.next/server/webpack-runtime.js:33:42) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/require.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next-server.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/lib/start-server.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/cli/next-dev.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/bin/next'
  ]
}
Error: Cannot find module 'next/dist/shared/lib/is-plain-object.js'
Require stack:
- /Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/require.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next-server.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/lib/start-server.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/cli/next-dev.js
- /Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
    at Function.mod._resolveFilename (/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/build/webpack/require-hook.js:182:28)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.../shared/lib/is-plain-object (/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js:175:18)
    at __webpack_require__ (/Users/ken/Documents/GitHub/blog_next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///../../../.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/lib/is-error.js:7:22)
    at Object.../../../.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/lib/is-error.js (/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js:77:1)
    at __webpack_require__ (/Users/ken/Documents/GitHub/blog_next/.next/server/webpack-runtime.js:33:42) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ken/Documents/GitHub/blog_next/.next/server/pages/_document.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/require.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next-server.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/next.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/server/lib/start-server.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/cli/next-dev.js',
    '/Users/ken/.nvm/versions/node/v15.14.0/lib/node_modules/next/dist/bin/next'
  ]
}```

Are code blocks rendering correctly?

Curious if the code blocks on the demo app are rendering with the proper syntax highlighting. I've attached a snippet from here

Based on the documentation from Nextra, I'd expect it to have some color. But perhaps I'm missing something!

Posts page not listing any posts

Hi all! First, thanks for the awesome work you guys put on it!

I just cloned the repo, run yarn install and yarn dev. Zero modification on the code.
The build version is running fine at https://newblogtest.vercel.app/, but I'm getting this message when I navigate to /posts, it shows the header, navbar, footer but no posts is listed on the page:

Warning: Prophrefdid not match. Server: "\\" Client: "/" at a at Link (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1616604704119:927:19) at div at Nav (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1616604704119:6403:3) at article at Layout (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1616604704119:6685:3) at http://localhost:3000/_next/static/chunks/pages/index.js?ts=1616604704119:6768:29 at NextraPage (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1616604704119:20285:103) at MDXContent (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1616604704119:20291:25) at Nextra (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1616604704119:10297:24) at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1616604704119:755:47) at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1616604704119:859:23) at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1616604704119:9236:5) at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1616604704119:9725:24) at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1616604704119:9856:24) printWarning @ react-dom.development.js:67 hot-dev-client.js:182 [Fast Refresh] done

node - v15.9.0
yarn - v1.22.5
SO: Windows 10
Chrome: v.89.0.4389.90

How to auto-height an Image using only a width?

I want to put images into a blog post with a fixed width but an automatically calculated height. How to do that?

Using code like

<Image
  src="/photos/test.jpg"
  alt="Photo"
  width={200}
  priority
  className="next-image"
/>

will return the error message:

Error: Image with src "/photos/test.jpg" must use "width" and "height" properties or "layout='fill'" property.

The property "layout=fill" doesn't work either, as it strechtes the image over the full screen size.

any ideas how to do that?

update to nextra and nextra-theme-blog non beta version

as a starter works good, but if you try to update directly the 2.0.0-beta.5 to alpha release of nextra and nextra-theme-blog posts pages Breaks. it will be nice to have the starter working with the latest stable release.
thanks