同时具有Javascript和Typescript的Next.js应用
Next.js是一个基于React的开源框架，用于构建具有服务器渲染(SSR)和静态生成(Static Generation)能力的Web应用程序。它支持同时使用JavaScript和TypeScript进行开发。
Next.js的主要特点包括：
- 服务器渲染(SSR)：Next.js可以在服务器端生成HTML，并将其发送到客户端，以提供更快的初始加载时间和更好的SEO。
- 静态生成(Static Generation)：Next.js可以在构建时预渲染页面，生成静态HTML文件，这些文件可以在每个请求时被重用，提供更快的页面加载速度。
- 热模块替换(Hot Module Replacement)：Next.js支持热模块替换，可以在开发过程中实时更新页面，提高开发效率。
- 自动代码拆分(Automatic Code Splitting)：Next.js会自动将页面和组件拆分为更小的块，只加载当前页面所需的代码，提高页面加载性能。
- 客户端路由(Client-side Routing)：Next.js支持客户端路由，可以在不刷新整个页面的情况下进行页面切换，提供更好的用户体验。
Next.js适用于各种Web应用程序，包括企业网站、电子商务平台、博客、新闻网站等。
腾讯云提供了一系列与Next.js相关的产品和服务，包括：
- 云服务器CVM：提供可扩展的计算资源，用于部署和运行Next.js应用。
- 云函数SCF：无服务器计算服务，可以用于处理Next.js应用的后端逻辑。
- 云存储COS：提供高可靠、低成本的对象存储服务，用于存储Next.js应用的静态文件和资源。
- 云数据库MySQL：可扩展的关系型数据库服务，用于存储Next.js应用的数据。
- 云监控CM：提供实时监控和告警功能，帮助用户监控Next.js应用的性能和可用性。
更多关于腾讯云产品和服务的详细信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我有一个用Javascript编写的Next.js应用程序，并计划开始用Typescript编写新的代码。我尝试通过在项目根目录下运行touch tsconfig.json将Typescript添加到项目中 npm install --save-dev typescript @types/react @types/node 当我尝试运行npm run dev时，我得到一个错误 error - ./pages/_app.js:6:0
Module not found: Can't resolve 'src/assets/styles/index.scss' 而且几乎所有
浏览 35提问于2021-10-19得票数 0
我使用了来自JetBrains的IDE JetBrains，它还包括WebStorm。
在编写function /Next.js应用程序时，需要解压缩函数参数的对象属性。
但是，当前IDE如果是在多行中，则会破坏属性的形成。
期望的输出：
export default function SomeComponent({
children,
home,
}: SomeComponentProps) {
return (
<>Something...</>
);
}
但这是实际输出的结果，如果我使用重新格式：
export default functio
浏览 3提问于2022-03-30得票数 1
回答已采纳
当我运行这个命令npx create-next-app --typescript --example with-tailwindcss my_project时，我的项目最后看起来如下所示：
如何在没有Javascript文件的情况下安装带有类型记录和Tailwindcss的Next.js？
浏览 13提问于2022-09-08得票数 0
我正在努力将我的个人网站从一个Next.js JavaScript转换为TypeScript项目。以前，我有一个占位符背景图像，加载了next/image系统：
<Image
src="/filename.jpg"
layout="fill"
objectFit="cover"
quality={100}
/>
我现在不使用装载机。这成功加载，如果有点慢。我移到了TypeScript，并没有对该行或相关行进行任何更改，但是在试图加载映像时，我得到了一个502 (坏网关)错误。
如果我将URL修改为一个不
浏览 3提问于2021-12-16得票数 0
从文档、Next.js 5.0声明和互联网上的各种文章来看，Next.js似乎很好地支持TypeScript，而且很多人都在使用它。
但是，这些线索表明，对getInitialProps应用程序至关重要的Next.js不起作用：
我怎么才能修好它？在类和函数组件中，当我执行ComponentName.getInitialProps = async function() {...}时，会得到以下错误：
[ts] Property 'getInitialProps' does not exist on type '({ data }: { data
浏览 1提问于2018-04-19得票数 45
回答已采纳
我遵循了一个教程，设置并创建了一个react.js +终结者应用程序，我(和教程制造者)使用。
npx创建-npx下一个应用程序-e，并带有-tailwindcss应用程序名
文件和所有文件都是创建的，但不是获取javascript文件(index.js等)，而是在类型记录(index.tsx)中获得。
(他的)
(我的)
我阅读了next.js文档，它说，如果我想要一个TypeScript文件，我应该在命令中添加--类型记录标志，而我没有这样做，但仍然得到了TypeScript文件。
我跟踪了视频，我没有做任何与他不同的事情，所以我想知道我做错了什么，以及如何修复
浏览 2提问于2022-04-20得票数 1
使用Typescript在我的自定义Next.js中使用AMP。根据Next.js官方文档，不支持Typescript，不过作为一种变通方法，您可以手动创建一个名为amp.d.ts的文件。我的应用程序有一个src文件夹，这个文件夹是放在我的源文件夹中，还是作为配置文件留在根目录中？
浏览 34提问于2021-05-02得票数 0
有人能描述NextPage在Next.js TypeScript项目中的类型吗？
每个站点都说它是用于Next.js中的类型分配，但是我想知道为什么我们应该使用它？它的用途是什么？为什么我们要使用这个而不是React.Node或React.Fc
浏览 7提问于2022-01-07得票数 2
我正在使用实现“与谷歌登录”。我的应用程序使用Next.js和TypeScript，所以我需要：
包含GSI客户端库的npm包。
GSI客户端库的TypeScript类型声明。
我还没有找到这两种方法:我只看到了从https://accounts.google.com/gsi/client和加载的脚本。
在哪里可以找到npm上的GSI库和类型声明？
浏览 41提问于2022-01-11得票数 18
我正在尝试使用TypeScript在NextJS中创建一个迷你应用程序，因为现在在Next.js中是现成的。我还想加入这两个新增加的特性：
以i18n为例：
// next.config.js
module.exports = {
i18n: {
// These are all the locales you want to support in
// your application
// Sub-path Routing
locales: ['en', 'cn'],
浏览 2提问于2021-01-06得票数 1
我目前正在将一个Next.js项目从JavaScript迁移到TypeScript，并且我遇到了一个错误：Property 'className' does not exist on type '{ props: ReactNode; }'。在Javascript中，我可以从道具中提取className，但是typescript找不到类型。代码如下： import { useRouter } from 'next/router'
import Link from 'next/link'
import { ReactNode }
浏览 156提问于2021-10-14得票数 0
回答已采纳
我试图使用类型记录以及普通的javascript。因此，有些文件是javascript文件(.js)，而其他文件是类型记录文件(.ts)。这个很管用。
但是，我在VSCode中的eslint给出了类型记录错误和警告，甚至在普通的javascript文件中也是如此。
对于.js文件，我可以关闭这些文件，但是只要文件是.ts / .tsx，就可以继续打开它们吗？
我的埃林特和打字的吐露只是。
.eslintignore：
**/node_modules/*
**/out/*
**/.next/*
.eslintrc.json：
{
"parser": "@typescr
浏览 5提问于2021-02-22得票数 2
几天来，我一直在努力，对于带有内置功能的应用程序next.js，没有在Mac上使用带有英特尔处理器的M1处理器，一切都很好。
使用next.js最新版本。
npx create-next-app@latest --typescript
安装简单的示例next.js +类型记录。节点版本16.3.2 - npm版本8.1.2
我通过nvm尝试了不同的节点版本。
有什么要看的日志吗？我对npm run dev没有任何错误
浏览 4提问于2022-01-11得票数 0
我们使用一个完整的TypeScript mono存储库，其结构如下： project
| - packages
| - common
| - appsCommon
| - Next.js-App
| - React-Native-App
| - Google-Cloud-Functions 到目前为止，common和appsCommon都是从TypeScript编译到ES6中的。 常见包的tsconfig.json如下： {
"extends": "../../tsconfig.json",
"compi
浏览 27提问于2020-08-27得票数 1
我已经用typescript和npx create-next-app --example with-typescript with-typescript-app ()开始了一个新的Next.js项目。
无论何时，当我尝试创建这样的类时：
export class Programm {
id: string;
name: string;
thumbnailUrl: string;
}
我得到语法错误：
Property 'id' has no initializer and is not definitely assigned in the constru
浏览 0提问于2019-03-30得票数 3
2回答
JSX中的突破线
、、、
我将应用程序中的所有文本存储在一个settings.ts文件中，但我需要添加一些断线，\n看起来不起作用。我还有别的办法可以打破这些防线吗？我和Next.js，React和TypeScript一起工作。
export const text = 'this is my text that \nshould have a breakline'
<div>{text}</div>
浏览 1提问于2022-08-30得票数 -1
4回答
我正在尝试构建一个使用类型记录的Next.js/React应用程序的坞映像。
安装了类型记录，并且我能够在本地运行一个没有停靠器的构建。
然而，随着码头形象的建立，我要讲到以下几点：
Step 8/10 : RUN npm run build
---> Running in ee577c719739
> project@0.0.5 build /app
> next build
Creating an optimized production build...
Attention: Next.js now collects completely anonymous te
浏览 0提问于2020-01-10得票数 26
回答已采纳
我已经使用typescript link - https://github.com/zeit/next.js/tree/master/examples/with-typescript创建了基本的nextjs应用程序 我无法将className属性添加到任何元素。出现以下错误。“IntrinsicAttributes& IntrinsicClassAttributes & Readonly & Readonly<{ IntrinsicAttributes？：ReactNode；}> }”类型上不存在属性“”className“” 我也得到了其他属性的类型错误
浏览 97提问于2019-10-07得票数 6
我尝试将Next.js与TypeScript结合使用，并需要添加自定义配置。我已经创建了一个next.config.js文件，但是看起来Next.js没有加载它。例如，自定义环境变量不可用。这是我的next.config.js
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");
module.exports = withPlugins([
[
optimizedImages,
浏览 10提问于2021-07-16得票数 1
我正在尝试使用next.js和typescript为直播实现"agora-rtc-sdk-ng“包。
import AgoraRTC from 'agora-rtc-sdk-ng';
导入此代码会抛出如下错误：
根据其他的stackoverflow答案，我尝试使用next/dynmaic。但没那么走运。如果有人在next.js中使用过"agora-rtc-sdk-ng“，请帮助我。
浏览 0提问于2021-12-02得票数 0
我使用的是next.js、react和typescript。
当我使用switch作为变量名时，我得到一个typescript错误。
我如何避免这个错误？
'switch' is not allowed as a variable declaration name.ts(1389)
const Template: Story = (args: AtomSwitchProps) => <Switch {...args} />;
export const switch = Template.bind({});
switch.args = {
};
浏览 0提问于2021-04-02得票数 1
我正在使用带有typescript的Nextjs。我正在尝试使用带有占位符道具的图像组件。但我一直收到一个错误。 ? 我的代码> import bgSell from '../../public/assets/bgSell.jpg';
<Image
layout="fill"
src={bgSell}
className="z-0 absolute top-0 left-0 min-h-full min-w-full object-cover"
placeholder="blur&
浏览 9提问于2021-07-08得票数 0
1回答
如何修复此错误？我把next.js和typescript一起使用，我没有设置webpack。
我试着安装了@zeit/next-typescript和fork-ts-checker-plugin plugin。
发生此错误是因为我的设置吗？
ERROR in undefined(undefined,undefined):
TS2318: Cannot find global type 'BigInt'.
请给我一些建议。谢谢。
浏览 14提问于2018-12-13得票数 0
回答已采纳
我正处于React/javascript学习经验的快速原型阶段。我想知道人们什么时候会选择Next.js或Gatsby.js这样的框架，而不是标准的Create React应用程序。
我真的很喜欢基于网页的结构和Next.js的预加载链接的前景。然而，我不确定什么时候你会达到下一个，而不是CRA，甚至是弹出的CRA。
谢谢!
浏览 0提问于2017-09-02得票数 65
我研究了以及类似的问题，比如 (这是TypeScript特有的--这个问题涉及JavaScript，不涉及编译TypeScript)。
我使用的是next.js 10.0.9，在运行next之后，我的应用程序需要大约50秒的时间来构建并开始响应HTTP请求。
进行更改后，重建工作还需要12秒时间。与其他流行的JS框架相比，这似乎要慢得多。
更详细的情况：
npm run dev只需运行next，接下来大约需要50秒才能响应(就在打印compiled successfully之后)。
这意味着像git bisect这样的任务找出bug的位置非常慢，因为下一步必须在签出每个提交
浏览 5提问于2021-03-22得票数 12
回答已采纳
我在一个小项目中使用Next.js和TypeScript。我想知道在运行npm run build时是否有可能禁用类型有效性检查，因为npm run dev期间发生了类型检查。此外，这将有助于构建没有在生产中使用的TypeScript包的生产构建。
浏览 13提问于2022-02-28得票数 2
我编写了一个TypeScript节点模块并安装到我的Next.js应用程序中。然而，当我试图运行我的Next.js应用程序时，模块会触发一个错误。你知道为什么会是这样吗？请参阅下面的详细资料。
我的类型记录节点模块
import axios from 'axios'
// AwsS3FileUploader()
// A JavaScript library for file upload to AWS S3 bucket from the client side.
export const AwsS3FileUploader = class {
url: st
浏览 5提问于2021-03-10得票数 0
回答已采纳
按照主题上的另一个，next.js会自动生成一个文件，以确保由TypeScript编译器获取next.js类型。next-env.d.ts文件如下所示：
/// <reference types="next" />
/// <reference types="next/types/global" />
好吧，但是我找不到这方面的TypeScript文档--有没有，或者它是一个实验性的特性？我想手动为另一个不生成类型的包创建一个类似的文件。
浏览 7提问于2020-05-20得票数 0
回答已采纳
*这是，而不是，是对的复制；这里所接受的答案是为TypeScript而做的，似乎不适用于JavaScript。
我正在Visual代码中处理一个Next.js项目，当我试图从"react"自动导入任何东西时，唯一的自动导入建议来自"react.production.min"和"react.development"。
我可以从"react"手动导入，但是即使文件中已经有一个import { ... } from "react"语句，它仍然不会出现在自动导入建议中，手动导入我使用的每个钩子也会变得非常乏味。
浏览 10提问于2022-03-28得票数 3
回答已采纳
1回答
我在Typescript中有一个Next.js项目。我要把它带回Javascript。我需要删除所有Typescript标记或将其编译为ES2018 JS。
我尝试使用以下配置在项目根目录下运行tsc命令：
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": ".",
"paths": { "*": ["types/*"] },
"allowJs": true,
&
浏览 40提问于2019-07-23得票数 0
回答已采纳
我正在处理一个Next.js项目，并在其中添加了ESLint，所以我必须将PropTypes添加到每个文件中。下面是道具所在的app.jsx组件，Component, pageProps
const App = ({ Component, pageProps: { session, ...pageProps } }) => {
const getLayout = Component.getLayout || ((page) => page);
return (
<ThemeProvider theme={theme}>
浏览 12提问于2022-07-11得票数 1
我想使用next.js和mongodb数据库创建一个CRUD web应用程序，然后托管在netlify上。
我们能做到吗？
或者，如果这是不可能的，那么我提到的三件事(next.js、mongodb、netlify)是否有一个替代方案，使之成为可能？
或者，如果这也不起作用，是否有一个解决方案让我能够使用javascript创建CRUD web应用程序，然后托管在netlify上？
我试着查看netlify上的所有模板，发现没有使用next.js和mongodb构建CRUD web应用程序的模板。
也许我错过了。
浏览 6提问于2022-11-13得票数 -1
我们即将开始开发一个新的web应用程序。我们几乎100%的开发将在Typescript中完成，而不是Javascript。
我已经开始研究对应用程序有意义的框架/代码结构。显然，这些框架中的大多数都是用Javascript编写的。我担心的是，这些框架在设计时考虑到了Javascript的局限性，而不是强类型的模块化Typescript (例如Backbone的事件是字符串名称)。
对于它们带来的结构/工具，这些框架仍然值得使用吗？我们最终会努力让Javascript框架以Typescript的方式工作吗？
浏览 5提问于2013-07-09得票数 2
回答已采纳
我有一个既可调用又可扩展的javascript函数/类。假设它的名称为Hello。
Hello可以通过以下两种方式之一使用：
class Hi extends Hello { }
或
Hello('there');
我如何编写Hello的类型，让TypeScript知道它既是可调用的，又是可扩展的？
浏览 0提问于2017-02-17得票数 2
回答已采纳
我正在写一个web应用程序，前端使用Angular 10，后端使用Parse-Server。 我想使用Typescript而不是Javascript来编写我所有的云代码函数和作业，但我有点不确定如何设置它，在Angular中一切都是“原生的”Typescript，所以不需要设置。 关于如何使用Parse设置Typescript的信息非常少。我找到的只是这篇不完整的媒体文章：https://medium.com/@avifatal/using-parseplatform-cloud-code-with-typescript-d27ded2e5054 如何在parse-server中设置Type
浏览 41提问于2020-07-10得票数 2
分配给我的任务是将一些页面添加到使用Laravel: 8.12 React: 17.0.2 NextJS: 10.0.9 Tailwind CSS: 2.0.4 React Query: 3.13.0 [ REST] TypeScript: 4.2.3生成的现有项目中
问题是，我不知道我是否可以在代码库中添加javascript文件，如果可能，我需要做哪些更改才能同时使用typescript和javascript？
浏览 13提问于2021-06-10得票数 1
回答已采纳
我注意到我的Next.js typescript项目中有一个名为next-env.d.ts的文件。我想声明一些枚举，以便在整个Next.js文件中使用。我如何做到这一点，然后在我的项目中访问这些枚举？
浏览 0提问于2020-04-25得票数 16
回答已采纳
我希望通过重用来自后端(Nest.js)服务的类型、DTO和其他同构应用程序来利用monorepo。在我的例子中，next.js应用程序和nest.js应用程序(它本身就是nest.js monorepo )在根dir中处于相同的级别。我正在重新导出nest-app/libs/types/src/index.ts中的一堆文件，然后在我的next.js应用程序中导入它。但是，当我这样做时，next.js向抱怨无法编译错误。
再现错误的最简单方法是执行以下操作
test-importnavigate 为monorepo创建一个任意文件夹，就像(cd test-import)run npx crea
浏览 3提问于2022-07-02得票数 6
回答已采纳
3回答
有没有办法获得NEXT.js应用编程接口路由的swagger文档？我正在使用Next.js进行前端和后端开发，我想为我用Next.js开发的API提供一个夸张的文档。
浏览 2提问于2021-04-05得票数 10
我正在做一个自己喜欢的项目来尝试TypeScript和它所有的好特性。
TypeScript支持开箱即用的模块，并且可以将所有文件连接成一个文件。我之前在我的JavaScript项目中使用了Browserify，它完美地模块化了我的应用程序。
现在我在想，在TypeScript世界里，我是否可以在没有它的情况下做一些事情，或者它是否仍然可以填补空白。
浏览 2提问于2015-08-10得票数 2
我正在尝试使用TypeScript设置Next.js框架，我可以将pages/index.js页面更改为pages/index.tsx页面，但当我尝试将pages/_app.js更改为pages/_app.tsx时，项目会中断，并显示以下错误：
错误:环境:没有这样的文件或目录，请打开/../../pages/_app.js
为什么会发生这种情况？我已经安装了TypeScript、@types/react和@types/node
浏览 1提问于2020-10-28得票数 0
在Next.js TypeScript web应用程序中，我有一个Chakra文本组件。noOfLines不能在Safari中显示，但在Chrome中是正确的。有什么建议吗？
<Box pt={3} width={'100%'}>
<Text noOfLines={show ? 0 : 2}>
<ReactMarkdown>{collection.description}</ReactMarkdown>
</Text>
<Button size="sm" o
浏览 10提问于2022-03-29得票数 0
关门了。 这个问题需要 调试详细信息 ..。它目前不接受答案。 想要改进这个问题吗？ 更新问题，使其成为 主题 堆栈溢出。 两天前就关门了。 改进这个问题 我正在处理一个带有typescript & next.js的项目，由于某些原因，函数参数的类型没有被检查。 我在下面提供了一个代码示例，对于它，我希望函数调用会抱怨我提供了一个 而不是使用 ..。 abstract class SExpr {
abstract toString(): string
}
function parse(expr: SExpr) {
// ...
}
parse('123
浏览 48提问于2021-02-28得票数 -2
回答已采纳
我正在使用带有React Query的GraphQL代码生成器，这是我的codegen.yml overwrite: true
schema: http://localhost:4000/graphql
generates:
src/lib/__generated__/graphql.ts:
documents:
- "**/graphql/**/*.graphql"
- "!mysqldata/**"
plugins:
- add:
content: &comment &
浏览 65提问于2021-09-23得票数 2
回答已采纳
export default combineReducers({
todosReducer,
calculatorReducer,
dateReducer,
});
我正在尝试将TypeScript集成到大型代码库的一部分中。在上面的例子中，假设前两个减速器是JavaScript，最后一个是TypeScript。代码编辑器似乎暗示我需要该文件为TypeScript，但当我这样做时，我在导入时会出现错误，因此不会编译。
import todosReducer from './todosReducer';
import calculatorReducer from './c
浏览 1提问于2020-03-06得票数 1
我有一个相当大的HTA，我仍然需要维护。我最初是用Notepad++编写的，但由于它的增长，我现在对TypeScript提供的Intellisense功能感兴趣。拥有Visual的HTML和CSS开发工具也很有帮助。
我知道我必须向应用程序中添加类型注释，但这仍然值得一段时间，而且可以逐步完成。
使用文件->新项目-> HTML应用程序与TypeScript一起输出一个DLL以供IIS或其他web服务器使用。我需要的输出是HTML、CSS和TypeScript编译成Javascript，并在HTML中对引用进行了调整。
简言之，我需要以下几点：
输出HTML/CSS文件而不是D
浏览 6提问于2015-02-19得票数 2
回答已采纳
我的next.js文件夹结构如下所示：
site
│ package.json
│ tsconfig.json
│ tslint.json
│ yarn.lock
│
├─dist
│ index.js
│
└─src
index.ts
问题是每个next build src都在src文件夹中生成新的tsconfig.json。我已经在tsconfig.json中配置了TS，放在父目录中，所以不需要新的配置文件。
在tsconfig.json构建过程中，有没有一种忽略生成next.js文件的方法？
10.0.5typescript- 3.8.3 next.js
浏览 6提问于2021-01-13得票数 1
回答已采纳
我正在尝试使用Grails 3.0.9作为服务器端来运行一个简单的Angular 2应用程序。我不明白的是，它必须有nodejs。我知道Node.js是像grails一样的服务器端技术。那么为什么有必要安装Node.js及其模块呢？我在某处读到，node.js附带了一个将TypeScript转换为JavaScript的包，因此此安装是强制的。不确定这是否正确，如果是这种情况，我不能在Grails 3.0中使用其他工具将TypeScript转换为JavaScript……
浏览 0提问于2017-02-18得票数 1
我正在使用Typescript构建Next.JS应用程序，希望在页面/组件之外访问next-i18next翻译，以便本地化验证消息，而所有验证引擎都定义在单独的实用程序类中。我检查了next-i18next是否有任何类型的静态访问器，但没有成功。有什么建议吗？
浏览 18提问于2021-03-08得票数 1
我正在尝试添加谷歌分析到一个Next.js网站。我遵循的是JavaScript版的this指南，但我的应用程序是TypeScript。在我安装@types/gtag.js之后，我得到了这个错误： No overload matches this call.
The last overload gave the following error.
Argument of type '"config"' is not assignable to parameter of type '"consent"'.ts(2769)
浏览 5提问于2021-06-26得票数 0
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
腾讯云开发者
