next-starter

Follow these steps to set up a new project using the next-starter template:

1. Clone the template (choose one method):
   • Use the GitHub "Use this template" button.
   • Use create-next-app:

     npx create-next-app -e https://github.com/Skolaczk/next-starter my-project-name

   • Use git clone:

     git clone https://github.com/Skolaczk/next-starter my-project-name

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the root directory and populate it with the required variables found in .env.example.
4. Prepare Husky (required for Git hooks to work):

   npm run prepare

5. Run the development server:

   npm run dev

   The app will be available at http://localhost:3000/.

The project uses prettier-plugin-tailwindcss to automatically sort Tailwind CSS classes. This plugin is configured via the prettier.config.js file. To ensure consistent class ordering, ensure this plugin is included in your Prettier configuration.

module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

The project uses next-intl to handle internationalization (i18n) routing. The middleware is initialized using createMiddleware from next-intl/middleware, passing in a routing configuration object imported from ./i18n/routing. This middleware intercepts requests to manage locale-based routing and redirects.

To customize the available locales or routing behavior, you must modify the routing object in ./i18n/routing.ts rather than this middleware file.

import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";

export default createMiddleware(routing);

The siteConfig object in src/lib/site-config.ts is the central location for defining global site metadata used for SEO and site identification. You can customize the site title, description, keywords, and URL. Note that url and googleSiteVerificationId are driven by environment variables.

export const siteConfig = {
  title: "Next.js Starter",
  description: "A Next.js starter template...",
  keywords: ["Next.js", "TypeScript", "Tailwind CSS", "Next-auth"],
  url: env.APP_URL,
  googleSiteVerificationId: env.GOOGLE_SITE_VERIFICATION_ID || "",
};

The project uses drizzle-kit for database schema management and migrations. The configuration is defined in drizzle.config.ts and specifies the database dialect, the location of the schema file, and the connection credentials. It relies on the DATABASE_URL environment variable (accessed via the @/env.mjs module) to provide the connection string.

import { defineConfig } from "drizzle-kit";
import { env } from "@/env.mjs";

export default defineConfig({
  dialect: "postgresql",
  schema: "./src/lib/schema.ts",
  dbCredentials: {
    url: env.DATABASE_URL,
  },
});

To ensure tests run against a live application, Playwright is configured to manage a local development server.

• Command: Runs npm run dev to start the server.
• URL: Monitors http://127.0.0.1:3000 to know when the server is ready.
• Reuse: On local machines, it will reuseExistingServer if one is already running, whereas on CI it will always start a fresh instance.

webServer: {
  command: "npm run dev",
  url: "http://127.0.0.1:3000",
  reuseExistingServer: !process.env.CI,
}

Use these scripts to manage development, testing, and building:

The src/lib/auth.ts module exports the core NextAuth primitives required to manage user sessions and authentication state in the application. You can use these methods to trigger sign-in/sign-out flows or to protect routes and access session data.

Available exports:

• auth: Used to retrieve the session in Server Components, Middleware, or API routes.
• handlers: The GET and POST handlers for NextAuth API routes.
• signIn: Function to initiate a sign-in process.
• signOut: Function to initiate a sign-out process.

import { auth, signIn, signOut } from "@/lib/auth";

// Example: Accessing session in a Server Component
const session = await auth();

// Example: Triggering sign in
await signIn("github");

// Example: Triggering sign out
await signOut();