1. 创建项目
通过create-next-app脚手架创建一个新的Next.js项目:
sh
npx create-next-app my-app
cd my-app
2. 自动SSR
在Next.js中,每个.js或.jsx文件的组件都会被自动处理为SSR页面。例如,创建一个pages/index.js文件:
js
// pages/index.js
import React from 'react';
function Home() {
return (
<div>
<h1>Welcome to Next.js with SSR!</h1>
<p>This is rendered on the server.</p>
</div>
);
}
export default Home;
运行npm run dev
启动开发服务器,访问http://localhost:3000
,你会发现HTML已经包含了服务器渲染的内容。
3. 动态路由与数据获取
Next.js支持动态路由,例如pages/posts/[id].js
。在getStaticPaths
和getStaticProps
或getServerSideProps
中获取数据:
js
// pages/posts/[id].js
import { useRouter } from 'next/router';
import { getPostById } from '../lib/api'; // 自定义API获取数据
export async function getServerSideProps(context) {
const id = context.params.id;
const post = await getPostById(id);
return {
props: {
post,
},
};
}
function Post({ post }) {
const router = useRouter();
if (!router.isFallback && !post) {
router.push('/404');
return null;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
export default Post;
4. 静态优化与预渲染
Next.js还支持静态优化和预渲染(Static Site Generation, SSG)。在getStaticPaths
和getStaticProps
中配置:
js
// pages/posts/[id].js
export async function getStaticPaths() {
// 获取所有可能的动态路径
const paths = await getPostIds();
return {
paths: paths.map((id) => `/posts/${id}`),
fallback: false, // 或者 'true' 表示未预渲染的路径返回404
};
}
export async function getStaticProps(context) {
const id = context.params.id;
const post = await getPostById(id);
return {
props: {
post,
},
};
}
6. 动态导入与代码分割
Next.js支持动态导入,这有助于按需加载代码,减少初始加载时间:
js
// pages/index.js
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/Dynamic'), {
ssr: false, // 避免在服务器上渲染
});
function Home() {
return (
<div>
<h1>Welcome to Next.js with SSR!</h1>
<DynamicComponent />
</div>
);
}
export default Home;
7. 优化图片与资源
使用next/image组件优化图片加载,自动压缩和调整大小:
js
// pages/index.js
import Image from 'next/image';
function Home() {
return (
<div>
<h1>Welcome to Next.js with SSR!</h1>
<Image src="/example.jpg" alt="Example Image" width={500} height={300} />
</div>
);
}
export default Home;
8. 自定义服务器
如果你需要更精细的控制,可以创建自定义服务器:
javascript
// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
createServer((req, res) => {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true);
const { pathname } = parsedUrl;
if (pathname === '/api') {
// Custom API route handling
// ...
} else {
handle(req, res, parsedUrl);
}
}).listen(3000, (err) => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});
});
9. 集成第三方库和框架
Next.js允许你轻松集成第三方库和框架,如Redux、MobX、Apollo等:
js
// pages/_app.js
import React from 'react';
import App from 'next/app';
import { Provider } from 'react-redux';
import store from '../store';
function MyApp({ Component, pageProps }) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}
export default MyApp;
10. 优化SEO
Next.js的SSR特性对SEO友好,但你还可以通过元标签优化:
js
// pages/index.js
import Head from 'next/head';
function Home() {
return (
<>
<Head>
<title>My Next.js App</title>
<meta name="description" content="This is an example of using Next.js with SEO." />
</Head>
<h1>Welcome to Next.js with SEO!</h1>
</>
);
}
export default Home;
11. 国际化(i18n)
Next.js 10引入了内置的i18n支持,可以轻松实现多语言网站:
javascript
// next.config.js
module.exports = {
i18n: {
locales: ['en', 'fr'],
defaultLocale: 'en',
},
};
12. Serverless模式
Next.js支持Serverless模式,这在Vercel上默认启用。这种模式下,你的应用会按需运行,节省资源成本。
13. Web Workers
在Next.js中使用Web Workers处理密集计算任务,以避免阻塞主线程:
js
// components/Worker.js
import { useEffect } from 'react';
import { createWorker } from 'workerize-loader!./my-worker.js'; // 使用workerize-loader加载worker文件
function MyComponent() {
const worker = createWorker();
useEffect(() => {
const result = worker.calculate(100000); // 调用worker方法
result.then(console.log);
return () => worker.terminate(); // 清理worker
}, []);
return <div>Loading...</div>;
}
export default MyComponent;
14. 集成TypeScript
Next.js支持TypeScript,为你的项目添加类型安全:
安装typescript
和@types/react
。
创建tsconfig.json
配置文件。
修改next.config.js
以启用TypeScript支持。
15. 自定义错误页
创建pages/_error.js
自定义错误页面:
js
// pages/_error.js
function Error({ statusCode }) {
return (
<div>
<h1>Error {statusCode}</h1>
<p>Something went wrong.</p>
</div>
);
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
return { statusCode };
};
export default Error;
16. 部署到Vercel
Next.js与Vercel完美集成,只需简单几步即可部署:
在Vercel官网创建账户或登录。
授权Vercel访问你的GitHub或GitLab仓库。
选择要部署的项目,Vercel会自动检测Next.js配置。
设置项目域名和环境变量(如有需要)。
点击"Deploy"按钮,Vercel会自动构建和部署应用。
17. 性能监控与优化
使用Next.js内置的Lighthouse插件或第三方工具(如Google PageSpeed Insights)进行性能评估。根据报告优化代码、图片和其他资源,以提高加载速度和用户体验。
2024年礼包 :2500G计算机入门到高级架构师开发资料超级大礼包免费送!