Writing Pages in JavaScript

Since ignite is just a small wrapper around Next.js you can easily break out into JavaScript or TypeScript. Simply change the file extension to the desired file type, rewrite the markdown to JSX, and you're done!

This is especially useful for the home page where you will probably want to flex your design skills and really market your project.

There are however a few considerations to make when you are doing this.

Layouts

ignite comes with a few different layouts that render your mdx files. When you break out into JS ignite can no longer automatically assign a layout to your page. Luckily you can easily use any of these layouts in your JS pages too!

import { makeNavBarLayout } from "next-ignite";

const NavBarLayout = makeNavBarLayout(
  // Provide any front-matter options to the layout here
  options
);

const MyPage = () => <NavBarLayout>My Page</NavBarLayout>;

export default MyPage;
import { makeNavBarLayout } from "next-ignite";

const NavBarLayout = makeNavBarLayout(
  // Provide any front-matter options to the layout here
  options
);

const MyPage = () => <NavBarLayout>My Page</NavBarLayout>;

export default MyPage;

Styling

To style your JS page to look just like the rest of your app you will need to use the components provided by the MDXProvider.

Add the following usage of useMDXComponents to your code. This hooks provides all the customizable components that ignite uses. That includes everything from the base HTML components to the components that make up the sidebar and the navbar.

import { useMDXComponents } from "@mdx-js/react";
import { makeNavBarLayout, Components } from "next-ignite";

const NavBarLayout = makeNavBarLayout();

const MyPage = () => {
  const components = useMDXComponents() as Components;

  return (
    <NavBarLayout>
      <components.h1>My Page</components.h1>
    </NavBarLayout>
  );
};

export default MyPage;
import { useMDXComponents } from "@mdx-js/react";
import { makeNavBarLayout, Components } from "next-ignite";

const NavBarLayout = makeNavBarLayout();

const MyPage = () => {
  const components = useMDXComponents() as Components;

  return (
    <NavBarLayout>
      <components.h1>My Page</components.h1>
    </NavBarLayout>
  );
};

export default MyPage;

Links

Any link that you

import Link from "next/link";
import { makeNavBarLayout, Components } from "next-ignite";

const NavBarLayout = makeNavBarLayout();

const MyPage = () => {
  const components = useMDXComponents() as Components;

  return (
    <NavBarLayout>
      <components.h1>My Page</components.h1>

      <Link passHref href={`/${section}`}>
        <components.a>Go somewhere</components.a>
      </Link>
    </NavBarLayout>
  );
};

export default MyPage;
import Link from "next/link";
import { makeNavBarLayout, Components } from "next-ignite";

const NavBarLayout = makeNavBarLayout();

const MyPage = () => {
  const components = useMDXComponents() as Components;

  return (
    <NavBarLayout>
      <components.h1>My Page</components.h1>

      <Link passHref href={`/${section}`}>
        <components.a>Go somewhere</components.a>
      </Link>
    </NavBarLayout>
  );
};

export default MyPage;

OpenGraphTags

Make sure each page has rich open graph previews.

import Link from "next/link";
import { makeNavBarLayout, Components, OpenGraphTags } from "next-ignite";

const NavBarLayout = makeNavBarLayout();

const MyPage = () => {
  const components = useMDXComponents() as Components;

  return (
    <>
      <OpenGraphTags
        title="My Page"
        description="Cool Content"
        image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Y2F0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
      />
      <NavBarLayout>
        <components.h1>My Page</components.h1>

        <Link passHref href={`/${section}`}>
          <components.a>Go somewhere</components.a>
        </Link>
      </NavBarLayout>
    </>
  );
};

export default MyPage;
import Link from "next/link";
import { makeNavBarLayout, Components, OpenGraphTags } from "next-ignite";

const NavBarLayout = makeNavBarLayout();

const MyPage = () => {
  const components = useMDXComponents() as Components;

  return (
    <>
      <OpenGraphTags
        title="My Page"
        description="Cool Content"
        image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Y2F0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
      />
      <NavBarLayout>
        <components.h1>My Page</components.h1>

        <Link passHref href={`/${section}`}>
          <components.a>Go somewhere</components.a>
        </Link>
      </NavBarLayout>
    </>
  );
};

export default MyPage;