The Basics

With initial setup complete, you're ready to start building out your project. If you followed the instructions from Start Here, your project structure should look like this:

my-next-app/
├── .next/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── node_modules/
├── public/
├── .env.local
├── .eslintrc.json
├── .gitignore
├── prettierrc.json
├── next.config.mjs
├── package.json
├── tailwind.config.ts
└── tsconfig.json

I would recommend making some immediate changes to your project, that will make it more maintainable and extensible, while also preventing common issues.

1. Add to file structure

I recommend adding the following folders and files to your project right off the bat, which will help form a more comprehensive foundation as you build out your application:

• app/api/ - for API routes
• components/ - for reusable components
• components/ui - for UI components
  • Button.tsx - first reusable UI component
• utils/ - for utility functions and variables
  • helpers.ts - for helper functions
  • constants.ts - for defining constants
• types/ - for defining types used throughout your application
  • index.d.ts - for defining global types

Your project structure should now look like this:

my-next-app/
├── .next/
├── app/
│   ├── api/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/
│   │   └── Button.tsx
├── node_modules/
├── public/
├── types/
│   └── index.d.ts
├── utils/
│   └── helpers.ts
│   └── constants.ts
├── .env.local
├── .eslintrc.json
├── .gitignore
├── prettierrc.json
├── next.config.mjs
├── package.json
├── tailwind.config.ts
└── tsconfig.json

2. Setup globals.css

The globals.css file is used to define styles that are applied across your application. They are unique to each application, however, in most applications I've worked on, I've found the following changes to be desirable:

Remove:

npx create-next-app@latest includes some default styles, most of which you aren't going to want. I'd recommend removing:

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}

Add:

There are two global css changes that I would recommend adding to most projects.

1. height or min-height: 100%

html,
body,
#__next {
  /* If you want primary scroll area to happen inside a container other than body. Common for single page applications (e.g. Slack, Spotify) */
  height: 100%;

  /* If you want scrolling to happen on the body itself. Common for blogs, documentation, ecommerce  */
  min-height: 100%;
}

2. background: #color

body {
  background: #f9fafb;
}

3. Extend tailwind.config.js

You'll use this config file to extend and modify your tailwind theme. To start, I would highly recommend extending the theme to include your brand and typography colors.

const config: Config = {
  content: {...},
  theme: {
    extend: {
      fontFamily: {...},
      colors: {
        primary: '#000000',
        brand: '#2563eb',
        textPrimary: 'rgba(0, 0, 0, 0.87)',
        textSecondary: 'rgba(0, 0, 0, 0.6)',
      }
    }
  },
  plugins: []
}

4. Clear page.tsx

The page.tsx file is the default page that NextJS creates for you. I recommend clearing out all of the default markup to make next steps easier. You should be left with:

export default function Home() {
  return <main>LaunchDocs</main>
}

Next, in Layouts, we will pick the architecture for your application.