Description
What version of Next.js are you using?
11.1.2
What version of Node.js are you using?
14.16.0
What browser are you using?
new EDGE
What operating system are you using?
windows 10
How are you deploying your application?
vercel hosting
Describe the Bug
I’ve small next.js app which consists of 5 pages and 35 component and it's still at it's beginning and will grow complexe more and more.
the page loading is painfully slow it can reach up to 5-6 seonds ( in developement but super fast in production ) and it's getting hard to code like this also vscode typescript checking takes about 1-2 seconds to report anything. If there’s type error It’ll keep saying loading if and takes about 2 seconds to show the error and i only experinsed this when working on next js project.
i still don't have a lot of dependencies installed but here is how my package.json looks like
"dependencies": {
"@types/styled-components": "^5.1.15",
"axios": "^0.24.0",
"framer-motion": "^4.1.17",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.3.1",
"styled-components": "^5.3.3"
},
"devDependencies": {
"@types/react": "17.0.33",
"eslint": "8.1.0",
"eslint-config-next": "11.1.2",
"typescript": "4.4.4"
}Expected Behavior
i expected this slowness when it get's to the point that project is complex and heavy enough to load at 6s but loading at 6s when only having 5 pages only 2 of them contains some code and the rest is just plain h1 tag is hard to code with
To Reproduce
this page is one of the pages that takes long to load
const LoginForm: FC = () => {
const [email, setEmail] = useState<string>('')
const [password, setPassword] = useState<string>('')
const { authenticate, loading } = __auth()
const auth = (e: FormEvent<HTMLInputElement>) => {
e.preventDefault()
authenticate(email, password)
}
return (
<>
<Form autoComplete='new-password'>
<Cols>
<Header>
<h1>se connecter</h1>
<p>Entrez vos identifiants pour accéder à votre compte</p>
</Header>
<Row>
<Input
placeholder='email...'
type='email'
icon={<MdAlternateEmail />}
onClick={(e: ChangeEvent<HTMLInputElement>): void =>
setEmail(e.target.value)
}
/>
<Input
placeholder='mot de passe...'
type='password'
icon={<BiLockOpenAlt />}
onClick={(e: ChangeEvent<HTMLInputElement>): void =>
setPassword(e.target.value)
}
/>
</Row>
<ButtonField
title='connexion'
status={loading}
onClick={(e: FormEvent<HTMLInputElement>): void => auth(e)}
/>
</Cols>
<Redirect>
<p>
{"Si vous n'avez pas de compte "}
<Link href='/auth/register' passHref>
<a>cliquez ici</a>
</Link>{' '}
pour en créer un.
</p>
</Redirect>
</Form>
</>
)
}
export default LoginForm