Lyle Denman

Next.js New Project Checklist

create-next-app

Goal: Set up your new Next.js project ready to deploy and without any unnecessary code or assets.

This checklist assumes you are using create-next-app to set up your project. This is not a comprehensive guide to Next.js, but it offers a good starting point for a Next.js project.

I created this GitHub repo to make it easier to get started.

The repo already implements all the steps outlined below, though you still need to customize the metadata and set a custom favicon. This repo uses the following settings:

$ npx create-next-app@latest (v14.2.5 as of publish date)

What is your project named? my-app

✔Would you like to use TypeScript? …No /Yes

✔Would you like to use ESLint? …No /Yes

✔Would you like to use Tailwind CSS? …No /Yes

✔Would you like to use `src/` directory? …No /Yes

✔Would you like to use App Router? (recommended) …No /Yes

✔Would you like to customize the default import alias (@/*)? …No /Yes

✔What import alias would you like configured? … @/*

Creating a new Next.js app in /path/to/my-app.

Note: All selections are default except for the option to customize the default import alias where I select "yes". I then use "@/*" which is the suggested alias. This allows you to import a component from the project root like this:
import MyComponent from "@/app/components/ui/my-component";

Checklist

  1. In page.tsx, remove the Image import and only return the main element with no Tailwind styles (delete the className attribute).
  2. Delete the image/SVG files from the public directory.
  3. In layout.tsx, update the metadata title and description. The title is the text that appears in your browser tab.

    Learn more about metadata configuration. This may also be a good time to configure Open Graph data. See the Next.js docs for metadata.openGraph configuration.

  4. In layout.tsx, import and initialize your desired font(s).

    Learn more about importing and using fonts. Pay special attention to the section on optimization and reusing fonts.

  5. Customize globals.css.

    Learn more about Tailwind's directives and how to add styles to elements and class names.

    Note: The default style includes a (prefers-color-scheme: dark) media query. If you use that, make sure to test on a device with both light and dark mode as some style settings may not look good in both modes.

  6. Update your favicon.ico file. To get started with a custom favicon, check out favicon.io.

    Learn more about valid file locations for favicon.ico and other icons.

  7. Create header and footer components.

    For internal links, be sure to use the Next.js <Link> component.

    Note: To create a footer that stays at the bottom of the screen when there isn't enough content to push it there while leaving the footer flexible enough to move down the document as content increases, edit the <body> element in layout.tsx to include the Tailwind className="flex flex-col min-h-svh". Then in the <footer> component, set className="mt-auto"

Wrap Up

That's everything I've found necessary to set up a new project with create-next-app.

Check out the commit diff to see all the changes from the steps outlined above.