https://github.com/jdawkinsdew/nextjs13-nextauth-synpress-boilerplate

Next.js boilerplate project offering integration of NextAuth.js for authentication, Tailwind CSS and Synpress(Cypress). Built with TypeScript. #NextJS #TailwindCSS #NextAuth #Cypress #TypeScript
https://github.com/jdawkinsdew/nextjs13-nextauth-synpress-boilerplate

cypress nextauth nextjs-boilerplate nextjs13 synpress tailwindcss typescript

Last synced: about 1 month ago
JSON representation

Next.js boilerplate project offering integration of NextAuth.js for authentication, Tailwind CSS and Synpress(Cypress). Built with TypeScript. #NextJS #TailwindCSS #NextAuth #Cypress #TypeScript

• Host: GitHub
• URL: https://github.com/jdawkinsdew/nextjs13-nextauth-synpress-boilerplate
• Owner: jdawkinsdew
• Created: 2023-06-17T21:46:21.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-28T05:50:26.000Z (over 1 year ago)
• Last Synced: 2024-04-15T05:16:17.261Z (10 months ago)
• Topics: cypress, nextauth, nextjs-boilerplate, nextjs13, synpress, tailwindcss, typescript
• Language: TypeScript
• Homepage:
• Size: 353 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Next.js 13 Tailwind Boilerplate with NextAuth.js and Synpress(Cypress)

This repository is a Next.js boilerplate project that includes NextAuth.js for authentication, Cypress for end-to-end testing, and Tailwind CSS for styling. It is built with TypeScript to provide type safety and better developer experience.

## Features

- Next.js for server-side rendering and frontend development.

- NextAuth.js for authentication with custom login, MFA, signup, and email providers.

- Tailwind CSS for easy and flexible styling.

- TypeScript for static typing and improved code quality.

- Synpress(Cypress) for end-to-end testing and test automation.

## Prerequisites

Make sure you have the following installed on your machine:

- Node.js (https://nodejs.org)

- npm (comes with Node.js)

- yarn (optional, but recommended) (https://yarnpkg.com)

## Getting Started

1. Clone this repository to your local machine:

```

git clone https://github.com/jdawkinsdew/nextjs-tailwind-boilerplate.git

cd nextjs-tailwind-boilerplate

```

2. Install the dependencies using npm or yarn:

```

npm install

# or

yarn install

```

3. Configure NextAuth.js:

In order to use authentication features, you need to configure NextAuth.js. The necessary files are already set up in the `src/auth` directory. Open `src/auth/[...nextauth].ts` and update the configuration according to your authentication providers and settings.

4. Set environment variables:

Create a `.env.local` file in the root of the project and set the required environment variables. Refer to `.env.example` for the list of required variables.

5. Run the development server:

```

npm run dev

# or

yarn dev

```

The development server will start, and you can access your application at `http://localhost:3000`.

## Testing with Synpress

Synpress is set up in this project for end-to-end testing. To run the Synpress tests, you need to create test scripts in `/tests/e2e/specs` directory.

And use the following command:

```

npm run sy:open

# or

yarn sy:open

```

This will open the Cypress test runner, and you can execute the tests from there.

## Building and Deployment

To build the production-ready version of your app, use the following command:

```

npm run build

# or

yarn build

```

This will create an optimized build of your application in the `build` directory.

For deployment, follow the recommended deployment process for Next.js applications.