blocks|key|2920324|text|“当一个文件被添加到页面目录中时，它会自动作为路由使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2920325|页面目录中的文件可以用来定义最常见的模式。“|2920326|2920327|路由器将自动将名为索引的文件路由到目录的根目录。|blockquote|2920328|2920329|2920330|pages/index.js→/|offset|length|style|CODE|2920331|更多细节：https://nextjs.org/docs/routing/introduction|2920332|entityMap|0|LINK|mutability|MUTABLE|url|https://nextjs.org/docs/routing/introduction^0|0|0|0|0|0|0|0|E|F|1|0|5|18|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|12|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@$L|16|M|17|N|O]|$L|18|M|19|N|O]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1A|8|@]|9|@$L|1B|M|1C|1|1D]]|A|$]]|$1|R|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

“When a file is added to the pages directory it's automatically available as a route.
The files inside the pages directory can be used to define most common patterns.”
<blockquote>
The router will automatically route files named
index to the root of the directory.
</blockquote>
<code> pages/index.js</code> → <code>/</code>
More details: <a href="https://nextjs.org/docs/routing/introduction" rel="nofollow noreferrer">https://nextjs.org/docs/routing/introduction</a>

blocks|key|2920346|text|我在另一条帖子中发布了解决我问题的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2920347|Next.js+Redirect+from+/+to+another+page|offset|length|2920348|这个例子取自https://dev.to/justincy/client-side-and-server-side-redirection-in-next-js-3ile|2920349|我需要立即将访问我的根页面(mywebsite.com/)的用户转发到一个子页面，在本例中是:+mywebsite.com/home。|2920350|在我的主index.js文件中粘贴以下任何一个，都会达到预期的结果：|2920351|有复制粘贴级别的示例。|2920352|客户端|2920353|import+{+useRouter+}+from+'next/router'

function+RedirectPage()+{
++const+router+=+useRouter()
++//+Make+sure+we're+in+the+browser
++if+(typeof+window+!==+'undefined')+{
++++router.push('/home')
++}
}

export+default+RedirectPage|code-block|syntax|javascript|2920354|服务器端|2920355|import+{+useRouter+}+from+'next/router'

function+RedirectPage({+ctx+})+{
++const+router+=+useRouter()
++//+Make+sure+we're+in+the+browser
++if+(typeof+window+!==+'undefined')+{
++++router.push('/home');
++++return;+
++}
}

RedirectPage.getInitialProps+=+ctx+=>+{
++//+We+check+for+ctx.res+to+make+sure+we're+on+the+server.
++if+(ctx.res)+{
++++ctx.res.writeHead(302,+{+Location:+'/home'+});
++++ctx.res.end();
++}
++return+{+};
}

export+default+RedirectPage|2920356|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/58173809/next-js-redirect-from-to-another-page/63278361#63278361|1|https://dev.to/justincy/client-side-and-server-side-redirection-in-next-js-3ile^0|0|0|13|0|0|6|27|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@$D|1E|E|1F|1|1G]]|A|$]]|$1|H|3|I|5|6|7|1H|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1J|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1K|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1L|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|1M|8|@]|9|@]|A|$]]|$1|W|3|X|5|R|7|1N|8|@]|9|@]|A|$S|T]]|$1|Y|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]]]

I posted the answer that solved my issue in this other thread:
<a href="https://stackoverflow.com/questions/58173809/next-js-redirect-from-to-another-page/63278361#63278361">Next.js Redirect from / to another page</a>
The example was taken from
<a href="https://dev.to/justincy/client-side-and-server-side-redirection-in-next-js-3ile" rel="nofollow noreferrer">https://dev.to/justincy/client-side-and-server-side-redirection-in-next-js-3ile</a>
I needed to immediately forward the user who visited my root page (mywebsite.com/) to a subpage, in this case Home: mywebsite.com/home
Pasting either of the following in my main index.js file, achieves the desired result:
There are copy-paste-level examples for
Client Side
<pre><code>import { useRouter } from 'next/router'

function RedirectPage() {
 const router = useRouter()
 // Make sure we're in the browser
 if (typeof window !== 'undefined') {
 router.push('/home')
 }
}

export default RedirectPage
</code></pre>
Server Side
<pre><code>import { useRouter } from 'next/router'

function RedirectPage({ ctx }) {
 const router = useRouter()
 // Make sure we're in the browser
 if (typeof window !== 'undefined') {
 router.push('/home');
 return; 
 }
}

RedirectPage.getInitialProps = ctx =&gt; {
 // We check for ctx.res to make sure we're on the server.
 if (ctx.res) {
 ctx.res.writeHead(302, { Location: '/home' });
 ctx.res.end();
 }
 return { };
}

export default RedirectPage
</code></pre>

blocks|key|2920399|text|下面是nextjs提供的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2920400|在根目录中创建或编辑文件next.config.js：|offset|length|style|CODE|2920401|​|2920402|module.exports+=+{
++async+redirects()+{
++++return+[
++++++{
++++++++source:+'/',
++++++++destination:+'/about',
++++++++permanent:+true,
++++++},
++++]
++},
}|code-block|syntax|javascript|2920403|2920404|来源：https://nextjs.org/docs/api-reference/next.config.js/redirects|2920405|entityMap|0|LINK|mutability|MUTABLE|url|https://nextjs.org/docs/api-reference/next.config.js/redirects^0|0|C|E|0|0|0|0|3|1Q|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|R|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

Here is the solution offered by nextjs.
Create or edit the file <code>next.config.js</code> in the root directory:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>module.exports = {
 async redirects() {
 return [
 {
 source: '/',
 destination: '/about',
 permanent: true,
 },
 ]
 },
}</code></pre>
</div>
</div>

Source: <a href="https://nextjs.org/docs/api-reference/next.config.js/redirects" rel="noreferrer">https://nextjs.org/docs/api-reference/next.config.js/redirects</a>

blocks|key|1426204|text|如果有人配置了不同的basePath，并且希望将/重定向到特定的页面，那么请确保通过404在配置中设置basePath:false重定向方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426205|在next.config.js中|1426206|module.exports+=+{
++++async+redirects()+{
++++++++return+[
++++++++++{
++++++++++++source:+'/',
++++++++++++destination:'/<your+basePath>/ui/auth/login',
++++++++++++permanent:+true,
++++++++++++basePath:false
++++++++++},
++++++++]
++++++},
++++assetPrefix:+'<your+prefix>',
++++basePath:+'<your+basePath>',
++++//For+both+Server+side+and+client+side+secretes
++++publicRuntimeConfig:+{
++++++++
++++}
}|code-block|syntax|javascript|1426207|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If anyone has a different basePath configured and wants to redirect / to a specific page then make sure to set basePath:false in redirects method in config else / will through 404
In next.config.js
<pre><code>module.exports = {
 async redirects() {
 return [
 {
 source: '/',
 destination:'/&lt;your basePath&gt;/ui/auth/login',
 permanent: true,
 basePath:false
 },
 ]
 },
 assetPrefix: '&lt;your prefix&gt;',
 basePath: '&lt;your basePath&gt;',
 //For both Server side and client side secretes
 publicRuntimeConfig: {
 
 }
}
</code></pre>

blocks|key|2920460|text|page.js应该在每个级别上作为主页工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2920461|https://beta.nextjs.org/docs/api-reference/file-conventions/page|2920462|entityMap|0|LINK|mutability|MUTABLE|url^0|0|7|0|0|1S|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<code>page.js</code> should work as a homepage on each level.
<a href="https://beta.nextjs.org/docs/api-reference/file-conventions/page" rel="nofollow noreferrer">https://beta.nextjs.org/docs/api-reference/file-conventions/page</a>

Does anybody know how to define any specific page in Next.js as the root (the home page)?
I have been looking online and was not able to find any concrete solutions. This is suppose to be a very common use case.
There is this other post, <a href="https://stackoverflow.com/questions/52601724/using-next-js-next-routes-how-to-define-a-home-route-for-the-base-web-page">Using Next.js next-routes, how to define a home route for the base web page?</a>, but it recommends creating a server for it.
It there any &quot;NextJs&quot; way of setting up a Home Page?
Any thoughts?
Thanks in advance!

Setting up the home page on Next.js

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

是否有人知道如何将Next.js中的任何特定页面定义为根(主页)我一直在网上寻找，没有找到任何具体的解决办法。这应该是一个非常常见的用例。还有另一个帖子，，但是它建议为它创建一个服务器。有什么“NextJ”设置主页的方法吗？有什么想法吗？提前感谢！

问在Next.js上设置主页
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Next.js上设置主页EN