Changelog for Template-NEXT: Version 0.5.2

Template-NEXT v0.5.2 ships a redesigned starter page. It follows v0.5.1, a same-day patch that fixed CSS modules and the starter page build, so this post covers both. If you scaffolded a project with 0.5.0, the manual fixes are at the end of this post.

Version 0.5.2 - What's New

1) A minimal starter page

The page you see on the first npm run dev has been rebuilt as a single narrow column. It's meant to be read once and deleted, so it only keeps what you need on day one:

• a header with the Template-NEXT version that generated the project, plus the theme toggle when next-themes is on
• Your project is ready. and a pointer to src/app/page.tsx, the file to edit first
• one sentence on the stack: Next.js with TypeScript, Tailwind CSS, React Compiler, and Turbopack, styled with the shadcn/ui preset, plus next-themes and Prettier when you kept them
• Get started and Changelog links
• the scripts list, using your package manager's commands

It still adapts to the flags you pick: no theme toggle with --no-themes, no format scripts with --no-prettier, and hand-styled links when the button component isn't selected.

2) Starter links stay real links

In 0.5.1 the links went through the Base UI Button's render prop with nativeButton={false}. That builds, but Base UI then adds role="button" to the link, so screen readers announce Get started as a button even though it opens a page.

0.5.2 keeps them as plain links and borrows the button styles through buttonVariants, which the preset's Button already exports:

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";

<Link
  href="https://blog.thilina.dev/blog/template-next-get-started"
  target="_blank"
  rel="noreferrer"
  className={buttonVariants()}
>
  Get started
  <ArrowRight />
</Link>;

It looks exactly the same and behaves like a link. If you're moving your own components over, shadcn/ui with Base UI covers render and the other changes from Radix in more detail.

3) Under the hood

Projects created with 0.5.2 link to this post from the starter's Changelog link. 0.5.1 shipped still linking to the 0.5.0 post, so a test now checks that each release links to its own changelog, and it runs before every publish.

Version 0.5.1 - What's Changed

1) CSS modules work again

I hit this one while building a small site with the CLI. The stylesheet loaded, but import styles from "./page.module.css" gave back an empty object. Every styles.foo was undefined, so every className came out empty.

The cause is one line in next.config.ts. Template-NEXT runs create-next-app with --tailwind --turbopack, and since version 16.4 that writes a Turbopack rule sending every stylesheet through Tailwind's loader:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  cacheComponents: true,
  partialPrefetching: true,
  reactCompiler: true,
  turbopack: {
    rules: {
      "*.css": {
        loaders: ["@tailwindcss/turbopack"],
        as: "*.css",
      },
    },
  },
};

export default nextConfig;

The as: "*.css" rename is the problem. A *.module.css file also matches *.css, so Turbopack treated CSS modules as plain global stylesheets. The rules still applied globally, but the class map was gone.

0.5.1 now removes only the as line after create-next-app runs:

turbopack: {
  rules: {
    "*.css": {
      loaders: ["@tailwindcss/turbopack"],
    },
  },
},

The Tailwind loader stays, so Tailwind v4 utilities still compile and @apply works inside modules. As with any Tailwind v4 setup, a module that uses @apply needs a @reference to your main stylesheet:

@reference "../globals.css";

.title {
  @apply text-4xl font-semibold tracking-tight;
}

Switching to @tailwindcss/postcss with a postcss.config.mjs also fixed it, but dropping as keeps create-next-app's own setup and adds no dependency or extra file. I checked the fix with both next build and next dev on a test page: hashed class names, module styles applied, and Tailwind utilities still present.

2) The starter page builds again

The shadcn/ui preset b1YmqvjRA installs a Button built on Base UI, which has no asChild prop. The 0.5.0 landing page still used <Button asChild>, so a fresh scaffold failed type-checking and next build.

0.5.1 moved both buttons to Base UI's render prop, and 0.5.2 then swapped that for plain links with buttonVariants, as described above.

3) Docs and tests

• removed postcss.config.mjs from the project structure in both the CLI README and the generated README, since it was listed but never generated
• new unit tests for the next.config.ts patch, the page template, and the README
• the end-to-end test, which scaffolds a real project, now also checks the next.config.ts fix

Upgrading

New projects get everything automatically:

$ npx @edward-hyde/template-next my-app

For a project scaffolded with 0.5.0:

1. In next.config.ts, delete the as: "*.css", line.
2. If your landing page has <Button asChild>, replace it with a Link that uses className={buttonVariants()}, as shown above.

Projects from 0.5.1 already build and style correctly. The only difference is the role="button" on the starter links, and most people replace that page anyway.

Summary

Template-NEXT 0.5.2 gives new projects a quieter starting point: a minimal starter page whose links behave like links. Together with the 0.5.1 fixes for CSS modules and the starter page build, a new project now builds, styles, and reads correctly from the first run. The workflow and flags are the same as 0.5.0.