I am looking to build my website using TypeScript instead of JavaScript. I followed the NextJS official guide for installing TS from scratch, but when I execute npm run dev, a 404 Error page greets me.
Okay, below is my tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Everything seems to be correct, so what could be causing this issue?
Next, let's take a look at package.json.
{
"name": "MY_PROJECT_NAME",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"go": "next build && next start",
"debug": "NODE_OPTIONS='--inspect' next dev"
},
"dependencies": {
"@mdx-js/loader": "^1.6.22",
"@next/mdx": "^10.0.3",
"@types/node": "^14.14.14",
"@types/react": "^17.0.0",
"@types/styled-components": "^5.1.5",
"@types/webpack": "^4.41.25",
"autoprefixer": "^10.1.0",
...
}
}
Something seems off with my code...
When I use .jsx files, everything works fine. However, .tsx files do not work as expected.
Does anyone have any insights into this problem?
-- Adding index.tsx --
import Layout from '../components/Layout'
export default () => (
<>
<Layout title="Kreimben::Home" isHome={true}>
<div className="flex justify-center text-center">
<div className="bg-gray-300 p-8 m-12 rounded-lg w-4/5 text-4xl font-serif">
Welcome to indie developer's website!
</div>
</div>
<main className="flex justify-center">
<div className="w-4/5 py-32 mb-12 shadow-xl rounded-lg bg-gradient-to-r from-teal-300 to-blue-500 text-center">
<p className="text-4xl font-serif">I code</p>
<p className="font-semibold text-6xl">iOS, macOS, and anything!</p>
</div>
</main>
</Layout>
</>
)