This website was generated with shipixen.com.
For more documentation, visit the shipixen Docs
npm i
First, run the development server:
npm run dev
To build the site for production, run the following command:
npm run build
Vercel The easiest way to deploy the template is to deploy on Vercel. Check out the Next.js deployment documentation for more details.
Netlify
Netlify’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), next/images
, etc.
See Next.js on Netlify for suggested configuration values and more details.
Static hosting services / GitHub Pages / S3 / Firebase etc.
-
Add
output: 'export'
innext.config.js
. See static exports documentation for more information. -
Comment out
headers()
fromnext.config.js
. -
Change
components/Image.tsx
to use a standard<img>
tag instead ofnext/image
:/* eslint-disable jsx-a11y/alt-text */ /* eslint-disable @next/next/no-img-element */ import NextImage, { ImageProps } from 'next/image' // @ts-ignore const Image = ({ ...rest }: ImageProps) => <img {...rest} /> export default Image
Alternatively, to continue using
next/image
, you can use an alternative image optimization provider such as Imgix, Cloudinary or Akamai. See image optimization documentation for more details. -
Remove
api
folder and components which call the server-side function such as the Newsletter component. Not technically required and the site will build successfully, but the APIs cannot be used as they are server-side functions. -
Run
yarn build
. The generated static content is in theout
folder. -
Deploy the
out
folder to your hosting service of choice or runnpx serve out
to view the website locally.
data/config/metadata.js
- contains most of the site configuration and can be modified at any time.
data/config/headerNavLinks.ts
- navigation links.
data/config/footerLinks.ts
- footer links.
data/config/pricingData.ts
- pricing page data.
data/authors/default.md
- default author information (required). Additional authors can be added as files in data/authors
.
data/blog
- add .mdx files with your own blog posts.
public/static
- store assets such as images and favicons.
tailwind.config.js
and css/tailwind.css
- tailwind configuration and stylesheet which can be modified to change the overall look and feel of the site.
css/prism.css
- controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. prism themes.
contentlayer.config.ts
- configuration for Contentlayer, including definition of content sources and MDX plugins used. See Contentlayer documentation for more information.
components/MDXComponents.tsx
- pass your own JSX code or React component by specifying it over here. You can then use them directly in the .mdx
or .md
file. By default, a custom link, next/image
component, table of contents component and Newsletter form are passed down. Note that the components should be default exported to avoid existing issues with Next.js.
layouts
- main templates used in pages:
- There are currently 3 post layouts available:
PostLayout
,PostSimple
andPostBanner
.PostLayout
is the default 2 column layout with meta and author information.PostSimple
is a simplified version ofPostLayout
, whilePostBanner
features a banner image. - There are 2 blog listing layouts:
ListLayout
, the layout used in version 1 of the template with a search bar andListLayoutWithTags
, currently used in version 2, which omits the search bar but includes a sidebar with information on the tags.
app
- pages to route to. Read the Next.js documentation for more information.
next.config.js
- configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.
Content is modelled using Contentlayer, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.
Frontmatter follows Hugo's standards.
Please refer to contentlayer.config.ts
for an up to date list of supported fields. The following fields are supported:
title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)
Here's an example of a post's frontmatter:
---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/backdrop-1.jpg', '/static/images/backdrop-2.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://insert-business-name.vercel.app/blog/introducing-insert-business-name
---
Here's an example on how to create a donut chart from Chart.js (assuming you already have the dependencies installed) and use it in MDX posts. First, create a new DonutChart.tsx
component in components
:
'use client';
import { Doughnut } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
ChartJS.register(ArcElement, Tooltip, Legend);
const DonutChart = ({ data }) => {
return <Doughnut data={data} />;
};
export default Doughnut;
Since the underlying Doughnut
component uses React hooks, we add the 'use client'
directive to specify that it is a client side component. Also, there is an existing issue which prevents named components from being used, so we need to export the component as the default export.
Next, add the component to MDXComponents.tsx
:
...
+ import DonutChart from './DonutChart'
export const components: MDXComponents = {
Image,
TOCInline,
a: CustomLink,
pre: Pre,
+ DonutChart,
BlogNewsletterForm,
}
You can now use the component in .mdx
files:
## Example Donut Chart
export const data = {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1,
},
],
};
<DonutChart data={data} />