Redeveloping this Site from Scratch

Creating a New Next.js Project

I’m going with the obvious Typescript & Tailwind CSS defaults.

pnpx create-next-app@latest new-site

I’ll first get the site running with all the data functioning, and then, at last, I’ll move to designing & styling.

Adding & optimizing fonts

import { Inter } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });

Image optimization

I had not been using the <Image /> component earlier. I’m considering using it instead of the plain <img /> tag.

Links

I’ll create a local link component to categorize internal and external links to style and implement them accordingly.

Moving forward…

The first thing I’m willing to add is the posts’ content.

I’ll create a (library) folder to store all the pages related to posts’ content to make things neat. The first file I created is [post]/page.tsx.

export default function Post({ params }: { params: { post: string } }) {
  return <>Post Slug: {params.post}</>;
}

Processing Markdown: I’m using @next/mdx to transform markdown and React components into HTML.

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

import type { MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}