brodyd795 · brodyd795 · Feb 23, 2022 · Feb 23, 2022 · Feb 23, 2022 · Feb 23, 2022
diff --git a/docs/advanced-features/custom-document.md b/docs/advanced-features/custom-document.md
@@ -41,7 +41,7 @@ Or add a `className` to the `body` tag:
 ## Caveats
 
 - The `<Head />` component used in `_document` is not the same as [`next/head`](/docs/api-reference/next/head.md). The `<Head />` component used here should only be used for any `<head>` code that is common for all pages. For all other cases, such as `<title>` tags, we recommend using [`next/head`](/docs/api-reference/next/head.md) in your pages or components.
-- React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), read [Layouts](/docs/basic-features/layouts.md) intead.
+- React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), read [Layouts](/docs/basic-features/layouts.md) instead.
 - `Document` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching/overview.md) like [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) or [`getServerSideProps`](/docs/basic-features/data-fetching/get-server-side-props.md).
 
 ## Customizing `renderPage`

diff --git a/examples/with-redis/lib/redis.js → examples/with-redis/lib/redis.ts b/examples/with-redis/lib/redis.js → examples/with-redis/lib/redis.ts
diff --git a/examples/with-redis/next-env.d.ts b/examples/with-redis/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/with-redis/package.json b/examples/with-redis/package.json
@@ -19,6 +19,11 @@
  "uuid": "^8.3.2"
  },
  "devDependencies": {
- "@tailwindcss/jit": "0.1.1"
+ "@tailwindcss/jit": "0.1.1",
+ "@types/ioredis": "4.28.8",
+ "@types/node": "^16.11.25",
+ "@types/react": "^17.0.2",
+ "@types/uuid": "8.3.4",
+ "typescript": "^4.5.5"
  }
 }
diff --git a/examples/with-redis/pages/_app.js → examples/with-redis/pages/_app.tsx b/examples/with-redis/pages/_app.js → examples/with-redis/pages/_app.tsx
@@ -1,7 +1,9 @@
+import type { AppProps } from 'next/app'
+
 import '../styles/globals.css'
 import { Toaster } from 'react-hot-toast'
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
  return (
  <>
  <Component {...pageProps} />

diff --git a/examples/with-redis/pages/api/create.js → examples/with-redis/pages/api/create.ts b/examples/with-redis/pages/api/create.js → examples/with-redis/pages/api/create.ts
@@ -1,8 +1,12 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
 import { v4 as uuidv4 } from 'uuid'
 
 import redis from '../../lib/redis'
 
-export default async function create(req, res) {
+export default async function create(
+ req: NextApiRequest,
+ res: NextApiResponse
+) {
  const { title } = req.body
 
  if (!title) {

diff --git a/examples/with-redis/pages/api/features.js → examples/with-redis/pages/api/features.ts b/examples/with-redis/pages/api/features.js → examples/with-redis/pages/api/features.ts
@@ -1,6 +1,11 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
 import redis from '../../lib/redis'
 
-export default async function getAllFeatures(req, res) {
+export default async function getAllFeatures(
+ req: NextApiRequest,
+ res: NextApiResponse
+) {
  const features = (await redis.hvals('features'))
  .map((entry) => JSON.parse(entry))
  .sort((a, b) => b.score - a.score)

diff --git a/examples/with-redis/pages/api/subscribe.js → examples/with-redis/pages/api/subscribe.ts b/examples/with-redis/pages/api/subscribe.js → examples/with-redis/pages/api/subscribe.ts
@@ -1,6 +1,11 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
 import redis from '../../lib/redis'
 
-export default async function subscribe(req, res) {
+export default async function subscribe(
+ req: NextApiRequest,
+ res: NextApiResponse
+) {
  const { email } = req.body
 
  if (email && validateEmail(email)) {
@@ -15,7 +20,7 @@ export default async function subscribe(req, res) {
  }
 }
 
-function validateEmail(email) {
+function validateEmail(email: string) {
  const re =
  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return re.test(String(email).toLowerCase())

diff --git a/examples/with-redis/pages/api/vote.js → examples/with-redis/pages/api/vote.ts b/examples/with-redis/pages/api/vote.js → examples/with-redis/pages/api/vote.ts
@@ -1,6 +1,11 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
 import redis from '../../lib/redis'
 
-export default async function upvote(req, res) {
+export default async function upvote(
+ req: NextApiRequest,
+ res: NextApiResponse
+) {
  const { title, id } = req.body
  const ip =
  req.headers['x-forwarded-for'] || req.headers['Remote_Addr'] || 'NA'

diff --git a/examples/with-redis/pages/index.js → examples/with-redis/pages/index.tsx b/examples/with-redis/pages/index.js → examples/with-redis/pages/index.tsx
@@ -1,13 +1,22 @@
 import { useState, useRef } from 'react'
+import type { NextApiRequest } from 'next'
+import type { MouseEvent } from 'react'
 import Head from 'next/head'
 import clsx from 'clsx'
 import useSWR, { mutate } from 'swr'
 import toast from 'react-hot-toast'
 import redis from '../lib/redis'
 
-const fetcher = (url) => fetch(url).then((res) => res.json())
+type Feature = {
+ id: string
+ title: string
+ score: number
+ ip: string
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
-function LoadingSpinner({ invert }) {
+function LoadingSpinner({ invert }: { invert?: boolean }) {
  return (
  <svg
  className={clsx(
@@ -35,8 +44,20 @@ function LoadingSpinner({ invert }) {
  )
 }
 
-function Item({ isFirst, isLast, isReleased, hasVoted, feature }) {
- const upvote = async (e) => {
+function Item({
+ isFirst,
+ isLast,
+ isReleased,
+ hasVoted,
+ feature,
+}: {
+ isFirst: boolean
+ isLast: boolean
+ isReleased: boolean
+ hasVoted: boolean
+ feature: Feature
+}) {
+ const upvote = async (e: MouseEvent<HTMLButtonElement>) => {
  e.preventDefault()
 
  const res = await fetch('/api/vote', {
@@ -85,11 +106,17 @@ function Item({ isFirst, isLast, isReleased, hasVoted, feature }) {
  )
 }
 
-export default function Roadmap({ features, ip }) {
+export default function Roadmap({
+ features,
+ ip,
+}: {
+ features: Feature[]
+ ip: string
+}) {
  const [isCreateLoading, setCreateLoading] = useState(false)
  const [isEmailLoading, setEmailLoading] = useState(false)
- const featureInputRef = useRef(null)
- const subscribeInputRef = useRef(null)
+ const featureInputRef = useRef<HTMLInputElement>(null)
+ const subscribeInputRef = useRef<HTMLInputElement>(null)
 
  const { data, error } = useSWR('/api/features', fetcher, {
  initialData: { features },
@@ -99,13 +126,13 @@ export default function Roadmap({ features, ip }) {
  toast.error(error)
  }
 
- const addFeature = async (e) => {
+ const addFeature = async (e: MouseEvent<HTMLFormElement>) => {
  e.preventDefault()
  setCreateLoading(true)
 
  const res = await fetch('/api/create', {
  body: JSON.stringify({
- title: featureInputRef.current.value,
+ title: featureInputRef?.current?.value ?? '',
  }),
  headers: {
  'Content-Type': 'application/json',
@@ -122,16 +149,18 @@ export default function Roadmap({ features, ip }) {
  }
 
  mutate('/api/features')
- featureInputRef.current.value = ''
+ if (featureInputRef.current) {
+ featureInputRef.current.value = ''
+ }
  }
 
- const subscribe = async (e) => {
+ const subscribe = async (e: MouseEvent<HTMLFormElement>) => {
  e.preventDefault()
  setEmailLoading(true)
 
  const res = await fetch('/api/subscribe', {
  body: JSON.stringify({
- email: subscribeInputRef.current.value,
+ email: subscribeInputRef?.current?.value ?? '',
  }),
  headers: {
  'Content-Type': 'application/json',
@@ -147,7 +176,10 @@ export default function Roadmap({ features, ip }) {
  }
 
  toast.success('You are now subscribed to feature updates!')
- subscribeInputRef.current.value = ''
+
+ if (subscribeInputRef.current) {
+ subscribeInputRef.current.value = ''
+ }
  }
 
  return (
@@ -189,7 +221,7 @@ export default function Roadmap({ features, ip }) {
  </form>
  </div>
  <div className="w-full">
- {data.features.map((feature, index) => (
+ {data.features.map((feature: Feature, index: number) => (
  <Item
  key={index}
  isFirst={index === 0}
@@ -254,7 +286,7 @@ export default function Roadmap({ features, ip }) {
  )
 }
 
-export async function getServerSideProps({ req }) {
+export async function getServerSideProps({ req }: { req: NextApiRequest }) {
  const ip =
  req.headers['x-forwarded-for'] || req.headers['Remote_Addr'] || 'NA'
  const features = (await redis.hvals('features'))

diff --git a/examples/with-redis/tsconfig.json b/examples/with-redis/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "baseUrl": ".",
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "incremental": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve"
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}
diff --git a/packages/create-next-app/create-app.ts b/packages/create-next-app/create-app.ts
@@ -127,7 +127,6 @@ export async function createApp({
  console.log(`Creating a new Next.js app in ${chalk.green(root)}.`)
  console.log()
 
- await makeDir(root)
  process.chdir(root)
 
  if (example) {

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1848,11 +1848,11 @@ export default async function getBaseWebpackConfig(
  }
 
  const fileNames = [
- '/tmp/test.css',
- '/tmp/test.scss',
- '/tmp/test.sass',
- '/tmp/test.less',
- '/tmp/test.styl',
+ '/tmp/NEXTJS_CSS_DETECTION_FILE.css',
+ '/tmp/NEXTJS_CSS_DETECTION_FILE.scss',
+ '/tmp/NEXTJS_CSS_DETECTION_FILE.sass',
+ '/tmp/NEXTJS_CSS_DETECTION_FILE.less',
+ '/tmp/NEXTJS_CSS_DETECTION_FILE.styl',
  ]
 
  if (rule instanceof RegExp && fileNames.some((input) => rule.test(input))) {