feat: next.js 16 (#1444)

* chore: next.js 16

* chore: update eslint config and page layout

* docs: update readme with husky instructions

* docs: update next version

* docs: ahh missed more stuff

* docs: missing stuff

Author: jpedroschmitz

.gitignore

@@ -3,7 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # JetBrains IDE files
 .idea/
@@ -28,8 +33,8 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files
+.env*
 
 # vercel
 .vercel

.lintstagedrc.js

@@ -0,0 +1,8 @@
+import path from 'node:path';
+
+const buildEslintCommand = (filenames) =>
+  `eslint --fix ${filenames.map((f) => `"${path.relative(process.cwd(), f)}"`).join(' ')}`;
+
+export default {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
+};

.nvmrc

@@ -1 +1 @@
-20
+24

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 João Pedro Schmitz
+Copyright (c) 2025 João Pedro Schmitz
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -5,7 +5,7 @@
 <br />
 
 <div align="center"><strong>Non-opinionated TypeScript starter for Next.js</strong></div>
-<div align="center">Highly scalable foundation with the best DX. All the tools you need to build your next project.</div>
+<div align="center">Highly scalable foundation with the best DX. All the tools you need to build your Next project.</div>
 
 <br />
 
@@ -27,7 +27,7 @@
 
 ## Features
 
-- ⚡️ Next.js 15 (App Router)
+- ⚡️ Next.js 16 (App Router)
 - ⚛️ React 19
 - ⛑ TypeScript
 - 📏 ESLint 9 — To find and fix problems in your code
@@ -88,15 +88,14 @@ List of websites that started off with Next.js TypeScript Starter:
 - [rocketseat.com.br](https://www.rocketseat.com.br)
 - [vagaschapeco.com](https://vagaschapeco.com)
 - [unfork.vercel.app](https://unfork.vercel.app)
-- [cryptools.dev](https://cryptools.dev)
 - [Add yours](https://github.com/jpedroschmitz/typescript-nextjs-starter/edit/main/README.md)
 
 ## Documentation
 
 ### Requirements
 
-- Node.js >= 20
-- pnpm 9
+- Node.js >= 24
+- pnpm 10
 
 ### Directory Structure
 
@@ -149,6 +148,16 @@ The Content Security Policy (CSP) is a security layer that helps to detect and m
 
 It contains a default and minimal policy that you can customize to fit your application needs. It's a foundation to build upon.
 
+### Husky
+
+Husky is a tool that helps us run scrips before Git events. We have 3 hooks:
+
+- `pre-commit` — (Disabled by default) Runs lint-staged to lint and format the files.
+- `commit-msg` — Runs commitlint to check if the commit message follows the conventional commit message format.
+- `post-merge` — Runs pnpm install to update the dependencies if there was a change in the `pnpm-lock.yaml` file.
+
+> Important note: Husky is disabled by default in the pre-commit hook. This is intention because most developers don't want to run lint-staged on every commit. If you want to enable it, run `echo 'HUSKY_ENABLED=true' > .husky/_/pre-commit.options`.
+
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.

eslint.config.mjs

@@ -1,26 +1,20 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { FlatCompat } from '@eslint/eslintrc';
-import js from '@eslint/js';
-import typescriptEslintEslintPlugin from '@typescript-eslint/eslint-plugin';
-import tsParser from '@typescript-eslint/parser';
-import prettier from 'eslint-plugin-prettier';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
-
-export default [
-  ...compat.extends('next', 'next/core-web-vitals', 'prettier'),
+import eslint from '@eslint/js';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import nextTs from 'eslint-config-next/typescript';
+import prettier from 'eslint-config-prettier/flat';
+import pluginPrettier from 'eslint-plugin-prettier/recommended';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import tseslint from 'typescript-eslint';
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  prettier,
+  pluginPrettier,
+  eslint.configs.recommended,
+  tseslint.configs.strict,
+  tseslint.configs.stylistic,
   {
-    plugins: {
-      prettier,
-    },
-
     rules: {
       'prettier/prettier': 'error',
       camelcase: 'off',
@@ -29,18 +23,6 @@ export default [
       'react/jsx-props-no-spreading': 'off',
       'react/no-unused-prop-types': 'off',
       'react/require-default-props': 'off',
-
-      'import/extensions': [
-        'error',
-        'ignorePackages',
-        {
-          ts: 'never',
-          tsx: 'never',
-          js: 'never',
-          jsx: 'never',
-        },
-      ],
-
       'jsx-a11y/anchor-is-valid': [
         'error',
         {
@@ -51,28 +33,14 @@ export default [
       ],
     },
   },
-  ...compat.extends('plugin:@typescript-eslint/recommended', 'prettier').map((config) => ({
-    ...config,
-    files: ['**/*.+(ts|tsx)'],
-  })),
-  {
-    files: ['**/*.+(ts|tsx)'],
-
-    plugins: {
-      '@typescript-eslint': typescriptEslintEslintPlugin,
-    },
-
-    languageOptions: {
-      parser: tsParser,
-    },
-
-    rules: {
-      '@typescript-eslint/explicit-function-return-type': 'off',
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      'no-use-before-define': [0],
-      '@typescript-eslint/no-use-before-define': [1],
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-var-requires': 'off',
-    },
-  },
-];
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts',
+  ]),
+]);
+
+export default eslintConfig;

package.json

@@ -23,40 +23,32 @@
     "format:ci": "prettier --list-different .",
     "postinstall": "husky"
   },
-  "lint-staged": {
-    "./src/**/*.{ts,js,jsx,tsx}": [
-      "eslint \"src/**/*.+(ts|js|tsx)\" --fix",
-      "prettier . --write"
-    ]
-  },
   "dependencies": {
     "@t3-oss/env-nextjs": "0.13.8",
     "babel-plugin-react-compiler": "1.0.0",
-    "next": "16.0.0-beta.0",
+    "next": "16.0.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "zod": "4.1.12"
   },
   "devDependencies": {
     "@commitlint/cli": "20.1.0",
     "@commitlint/config-conventional": "20.0.0",
-    "@eslint/eslintrc": "3.3.1",
-    "@eslint/js": "9.37.0",
+    "@eslint/js": "9.38.0",
     "@ianvs/prettier-plugin-sort-imports": "4.7.0",
-    "@types/node": "22.18.11",
+    "@types/node": "24.9.1",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
-    "@typescript-eslint/eslint-plugin": "8.46.1",
-    "@typescript-eslint/parser": "8.46.1",
-    "eslint": "9.37.0",
-    "eslint-config-next": "16.0.0-beta.0",
+    "eslint": "9.38.0",
+    "eslint-config-next": "16.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.4",
     "husky": "9.1.7",
-    "lint-staged": "16.2.4",
+    "lint-staged": "16.2.5",
     "prettier": "3.6.2",
     "prettier-plugin-sort-json": "4.1.1",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.46.2"
   },
   "pnpm": {
     "overrides": {