API Constants
API_VERSION
Current API version number.
API_BASE_URL
Base URL for API endpoints.
Value: process.env.NEXT_PUBLIC_API_URL || "https://api.example.com"
API_TIMEOUT
Default timeout for API requests in milliseconds.
Value: 30000 (30 seconds)
HTTP_STATUS
HTTP status code constants.
Resource created successfully
Request succeeded with no content to return
Service temporarily unavailable
Example
import { HTTP_STATUS } from '@/constants';
if (response.status === HTTP_STATUS.OK) {
// Handle success
} else if (response.status === HTTP_STATUS.UNAUTHORIZED) {
// Redirect to login
}
Authentication Constants
AUTH_TOKEN_KEY
LocalStorage key for authentication token.
REFRESH_TOKEN_KEY
LocalStorage key for refresh token.
TOKEN_EXPIRY_KEY
LocalStorage key for token expiry timestamp.
SESSION_TIMEOUT
Session timeout duration in milliseconds.
REFRESH_THRESHOLD
Time before expiry to refresh token (milliseconds).
Value: 300000 (5 minutes)
Route Constants
ROUTES
Application route paths.
Example
import { ROUTES } from '@/constants';
import { useRouter } from 'next/router';
function LoginButton() {
const router = useRouter();
const handleLogin = () => {
router.push(ROUTES.LOGIN);
};
return <button onClick={handleLogin}>Login</button>;
}
UI Constants
BREAKPOINTS
Responsive design breakpoints in pixels.
Extra extra large devices
THEME_COLORS
Application color palette.
Z_INDEX
Z-index layering constants.
Example
import { BREAKPOINTS, THEME_COLORS, Z_INDEX } from '@/constants';
import styled from 'styled-components';
const Modal = styled.div`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: ${Z_INDEX.MODAL};
background-color: ${THEME_COLORS.PRIMARY};
@media (min-width: ${BREAKPOINTS.MD}px) {
max-width: 600px;
margin: 0 auto;
}
`;
Validation Constants
VALIDATION_RULES
Common validation rules and limits.
Maximum email address length
Maximum bio/description length
Minimum phone number length
Maximum phone number length
REGEX_PATTERNS
Common regular expression patterns.
Phone number pattern (US)
Username pattern (alphanumeric and underscore)
Hexadecimal color code pattern
Alphanumeric characters only
Example
import { VALIDATION_RULES, REGEX_PATTERNS } from '@/constants';
function validateUsername(username: string): boolean {
return (
username.length >= VALIDATION_RULES.USERNAME_MIN_LENGTH &&
username.length <= VALIDATION_RULES.USERNAME_MAX_LENGTH &&
REGEX_PATTERNS.USERNAME.test(username)
);
}
function validateEmail(email: string): boolean {
return (
email.length <= VALIDATION_RULES.EMAIL_MAX_LENGTH &&
REGEX_PATTERNS.EMAIL.test(email)
);
}
DEFAULT_PAGE_SIZE
Default number of items per page.
MAX_PAGE_SIZE
Maximum allowed items per page.
PAGE_SIZE_OPTIONS
Available page size options for user selection.
File Upload Constants
MAX_FILE_SIZE
Maximum file upload size in bytes.
ALLOWED_FILE_TYPES
Allowed file MIME types for upload.
Value: ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
Value: ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
Value: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
Example
import { MAX_FILE_SIZE, ALLOWED_FILE_TYPES } from '@/constants';
function validateFile(file: File): { valid: boolean; error?: string } {
if (file.size > MAX_FILE_SIZE) {
return { valid: false, error: 'File too large (max 5MB)' };
}
const allAllowedTypes = [
...ALLOWED_FILE_TYPES.IMAGES,
...ALLOWED_FILE_TYPES.DOCUMENTS
];
if (!allAllowedTypes.includes(file.type)) {
return { valid: false, error: 'File type not allowed' };
}
return { valid: true };
}
Date & Time Constants
Common date format strings.
Value: "dddd, MMMM DD, YYYY"
Value: "MM/DD/YYYY hh:mm A"
TIME_ZONES
Common time zone identifiers.
Value: "America/New_York"
Value: "America/Los_Angeles"
Error Messages
ERROR_MESSAGES
Standardized error messages.
Value: "This field is required"
Value: "Please enter a valid email address"
Value: "Password must be at least 8 characters"
Value: "Passwords do not match"
Value: "Network error. Please try again."
Value: "You are not authorized to perform this action"
Value: "The requested resource was not found"
Value: "An unexpected error occurred. Please try again later."
Example
import { ERROR_MESSAGES } from '@/constants';
function LoginForm() {
const [errors, setErrors] = useState<Record<string, string>>({});
const validate = (email: string, password: string) => {
const newErrors: Record<string, string> = {};
if (!email) {
newErrors.email = ERROR_MESSAGES.REQUIRED_FIELD;
} else if (!email.includes('@')) {
newErrors.email = ERROR_MESSAGES.INVALID_EMAIL;
}
if (!password) {
newErrors.password = ERROR_MESSAGES.REQUIRED_FIELD;
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
// ...
}