This template includes almost everything you need to build a personal website. You can write documents and blogs, have navigation bar, search bar, page bar, TOC bar, and other integrated components. And especially with multi-language support (i18n) - pre-configured Vietnamese and English.
- NextJS 14
- Nextra v3 alpha
- Tailwind CSS, Shadcn/ui, Headless UI...
- MDX v3
See more new features of Nextra v3 here
You can get started by creating your own Nextra website and deploy to Vercel by clicking the link:
Vercel will copy the Nextra Personal Website Template and deploy the website for you. Once completed, every commit in the repo will be deployed automatically.
You can also clone this repository manually.
To manually create a Nextra Docs site, you must install NextJS, React, Nextra V3 alpha and Nextra Docs Theme V3 alpha. In your project directory, run the following command to install the dependencies:
npm i next react react-dom nextra@alpha nextra-theme-docs@alpha
If you have NextJS installed in your project, you just need to install nextra nextra-theme-docs.
Add the following scripts package.json:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},You can run the project using npm npm run dev, running in development mode or npm run build && npm run start production mode.
Create the next.config.js following file in the project root directory:
const withNextra = require('nextra')({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.jsx',
});
module.exports = withNextra();
// If you have other Next.js configurations, you can pass them as parameters:
// module.exports = withNextra({ /* another next.js configuration */ })
With the above configuration, Nextra can process Markdown files in your NextJS project, with the theme specified. Other Nextra configurations can be found in the Guide.
Finally, create the theme.config.jsx corresponding file in the project root directory. This will be used to configure the Nextra Docs theme:
export default {
logo: <span>Nextra Template</span>,
project: {
link: 'https://github.com/namnguyenthanhwork/nextra-personal-website-template',
},
};
Full theme configuration can be found here.
You can now create your first MDX page at pages/index.mdx:
# Welcome to Nextra
Hello world!And run the command next or next dev specified in package.json to start project development! 🎉