跳到主要内容

自动安装

我们建议使用 create-next-app 来开始一个新的 Next.js 应用,它会自动为您设置好一切。要创建一个项目,请运行:

npx create-next-app@latest

安装过程中,您将看到以下提示:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

文浩MarvinWebNext js阅读需 4 分钟

Next.js入门教程

阅读之前

在了解Next.js之前,需要掌握React的基本使用方法。

搭建

安装

# 创建项目目录
mkdir you_project
# 进入项目目录
cd you_project
# 初始化package.json
npm init -y
# 安装依赖包
npm install --save react react-dom next
# 创建一个pages文件夹
mkdir pages


文浩MarvinWebNext js阅读需 10 分钟

项目创建:

安装配置:

我们建议使用 create-next-app创建新的 Next.js 应用程序,它会自动为你设置所有内容。创建项目,请运行:

npx create-next-app@latest
# or
yarn create next-app


文浩MarvinWebNext js阅读需 2 分钟

React的createContext是React Context API的一部分,它允许你在组件树中创建一个可以被所有子组件访问的数据存储。这对于避免通过多层组件传递props非常有用。

以下是一个基本的使用示例:


文浩MarvinWebReact阅读需 2 分钟

next.config.js是Next.js项目中的一个配置文件,它允许你对Next.js的默认配置进行自定义。以下是一个如何在next.config.js中配置开发环境和生产环境的示例:


文浩MarvinWebNext js阅读需 2 分钟

Next.js使用一个名为pages的特殊目录。这个目录用于自动路由。每一个在pages目录下的.js.jsx.ts.tsx文件都会自动成为一个可访问的路由。以下是一个示例:

pages/
├── index.js
├── about.js
├── dashboard.js
├── blog/
│ ├── index.js
│ ├── [slug].js
│ └── [id]/
│ └── index.js
└── user/
├── index.js
└── [id].js

文浩MarvinWebNext js阅读需 2 分钟

_app.js说明

在Next.js中,_app.js_document.js是两个特殊的文件,它们允许你控制你的应用的外部行为和文档结构。

  1. _app.js: 这个文件用于初始化所有页面。你可以在这个文件中导入全局CSS,或者添加全局的布局,状态管理等。例如:

文浩MarvinWebNext js阅读需 2 分钟

30条GPT-4V prompt

内容转自@hridoyreh的推

序号英文Prompt中文翻译
1Logo Design FeedbackLogo设计反馈
Analyze the uploaded logo design intended for a solopreneur’s personal brand. Provide feedback on color harmony, visual elements, and overall brand representation. Also, suggest potential improvements to make it more memorable and effective.分析为个体企业主的个人品牌设计的上传的Logo。提供关于颜色和谐、视觉元素和整体品牌代表性的反馈。同时,建议可能的改进,使其更加难忘和有效。
2Website Layout Analysis网站布局分析
Evaluate the visual layout of the solopreneur’s website screenshot provided. Point out design inconsistencies, user experience bottlenecks, and areas for visual enhancement. Provide a guided redesign strategy to improve overall website aesthetics and functionality.评估提供的个体企业主网站截图的视觉布局。指出设计上的不一致性、用户体验瓶颈和需要视觉增强的区域。提供一个指导性的重新设计策略,以提高整体网站的美观性和功能性。
3Product Packaging Review产品包装审查
Inspect the product packaging image submitted. Identify key visual elements, branding consistency, and appeal to the target audience. Offer insights into improving the packaging design for better market reception.检查提交的产品包装图像。识别关键视觉元素、品牌一致性和对目标受众的吸引力。提供改进包装设计以获得更好市场接受度的见解。
4Social Media Post Effectiveness社交媒体帖子效果分析
Analyze the provided solopreneur’s social media post image. Comment on visual engagement, content clarity, and alignment with brand voice. Propose optimization techniques to increase audience engagement and reach.分析提供的个体企业主的社交媒体帖子图像。评论视觉参与度、内容清晰度和与品牌声音的一致性。提议优化技巧以增加受众参与度和覆盖范围。
5Print Material Assessment印刷材料评估
Review the scanned business card and flyer designs. Comment on the choice of typography, color palette, and visual hierarchy. Advise on refining these print materials to ensure they leave a lasting impression.审查扫描的名片和传单设计。评论字体选择、色彩调色板和视觉层次结构。建议完善这些印刷材料,以确保它们留下深刻的印象。
6Product Image Enhancement产品图像增强
Examine the product photos provided. Recommend edits to enhance product visibility, background removal or adjustment, and lighting corrections. Offer tips for more professional product photography in the future.检查提供的产品照片。推荐编辑以增强产品可见度、背景移除或调整以及光线校正。为未来提供更专业的产品摄影技巧。
7Merchandise Design Feedback商品设计反馈
Evaluate the merchandise designs (e.g., T-shirts, mugs) shared. Assess visual appeal, print quality, and brand representation. Propose changes to elevate the merchandise’s market value and attractiveness.评估共享的商品设计(例如,T恤,马克杯)。评估视觉吸引力、印刷质量和品牌代表性。提议更改以提高商品的市场价值和吸引力。
8Infographic Analysis信息图分析
Inspect the solopreneur’s infographic image. Analyze information flow, visual coherence, and design simplicity. Suggest improvements to enhance readability and information retention.检查个体企业主的信息图像。分析信息流、视觉连贯性和设计简洁性。建议改进以增强可读性和信息保留。
9Video Thumbnail Effectiveness视频缩略图效果分析
Review the provided video thumbnail. Comment on visual elements, title readability, and click-through potential. Advise on design tweaks to maximize viewer engagement.审查提供的视频缩略图。评论视觉元素、标题的可读性和点击潜力。建议设计调整以最大化观众参与度。
10Event Poster Evaluation活动海报评估
Analyze the event poster shared. Assess visual hierarchy, call-to-action prominence, and event details clarity. Recommend design alterations to increase event attendance and interest.分析共享的活动海报。评估视觉层次、行动召唤的突出性和活动细节的清晰度。推荐设计修改以增加活动参与度和兴趣。
11Workspace Productivity Setup工作空间生产力设置
Examine the photo of the solopreneur’s workspace. Suggest ergonomic improvements, organization techniques, and aesthetic changes to foster a more productive and motivating work environment.检查个体企业主的工作空间的照片。建议人体工程学改进、组织技巧和美学变化,以培养更有生产力和激励的工作环境。
12Product Labeling Review产品标签审查
Inspect the product label design provided. Comment on legibility, ingredient presentation, and brand consistency. Offer insights into refining the label for better consumer understanding.检查提供的产品标签设计。评论可读性、成分展示和品牌一致性。提供改进标签以获得更好的消费者理解的见解。
13Ad Design Analysis广告设计分析
Evaluate the solopreneur’s advertisement image. Analyze visual appeal, message clarity, and audience targeting. Propose design modifications to optimize conversion rates and brand visibility.评估个体企业主的广告图像。分析视觉吸引力、信息清晰度和受众定位。提议设计修改以优化转化率和品牌可见度。
14Photography Portfolio Review摄影作品集审查
Review the set of photos from the solopreneur’s photography portfolio. Provide feedback on composition, lighting, and post-production. Advise on portfolio arrangement to attract more clientele.审查来自个体企业主摄影作品集的一组照片。提供关于构图、光线和后期制作的反馈。建议作品集的排列以吸引更多的客户。
15Instructional Graphic Assessment教学图形评估
Examine the instructional graphic or tutorial image shared. Comment on step clarity, visual guidance, and overall effectiveness. Recommend enhancements to ensure user understanding and engagement.检查共享的教学图形或教程图像。评论步骤的清晰度、视觉指导和整体有效性。推荐增强功能以确保用户理解和参与。
16E-book Cover Evaluation电子书封面评估
Analyze the e-book cover design provided. Assess title prominence, visual elements, and genre representation. Offer design suggestions to increase e-book downloads and interest.分析提供的电子书封面设计。评估标题的突出性、视觉元素和类型代表性。提供设计建议以增加电子书下载和兴趣。
17Blog Imagery Feedback博客图像反馈
Review the images used in the solopreneur’s blog post. Provide insights into image relevance, quality, and enhancement techniques to ensure better reader engagement and understanding.审查用于个体企业主博客帖子的图像。提供关于图像相关性、质量和增强技术的见解,以确保更好的读者参与度和理解。
18Online Course Thumbnail Analysis在线课程缩略图分析
Evaluate the thumbnail for the solopreneur’s online course. Comment on course topic clarity, visual engagement, and branding. Propose design tweaks to maximize student enrollments.评估个体企业主在线课程的缩略图。评论课程主题的清晰度、视觉参与度和品牌。提议设计调整以最大化学生注册。
19Podcast Cover Art Review播客封面艺术审查
Inspect the podcast cover art image shared. Analyze visual elements, podcast theme representation, and legibility. Recommend changes to boost listener attraction and brand consistency.检查共享的播客封面艺术图像。分析视觉元素、播客主题代表性和可读性。推荐更改以增强听众吸引力和品牌一致性。
20Email Header Evaluation电子邮件标题评估
Examine the email header design provided. Comment on visual appeal, call-to-action visibility, and message clarity. Advise on design adjustments to enhance email open rates and engagement.检查提供的电子邮件标题设计。评论视觉吸引力、行动召唤的可见性和信息清晰度。建议设计调整以增强电子邮件打开率和参与度。
21Mobile App UI Feedback移动应用UI反馈
Review the solopreneur’s mobile app UI screenshots. Provide feedback on user experience, visual design, and functionality. Suggest improvements to elevate user satisfaction and retention.审查个体企业主的移动应用UI截图。提供关于用户体验、视觉设计和功能的反馈。建议改进以提高用户满意度和保留率。
22Physical Storefront Analysis实体店面分析
Analyze the photo of the solopreneur’s physical storefront. Assess branding, window displays, and customer attraction. Offer insights for enhancing in-store traffic and brand recognition.分析个体企业主的实体店面的照片。评估品牌、橱窗展示和客户吸引力。提供增强店内流量和品牌识别的见解。
23Artwork Portfolio Review艺术作品集审查
Evaluate the set of artworks from the solopreneur’s art portfolio. Provide feedback on artistic techniques, theme coherence, and presentation. Advise on portfolio arrangement to garner more appreciation and sales.评估来自个体企业主艺术作品集的一组艺术品。提供关于艺术技巧、主题连贯性和展示的反馈。建议作品集的排列以获得更多的赞赏和销售。
24Recipe Presentation Analysis食谱展示分析
Inspect the photo of the solopreneur’s food dish or recipe presentation. Comment on visual appeal, plating techniques, and clarity. Recommend tweaks to boost recipe popularity and engagement.检查个体企业主的食物盘或食谱展示的照片。评论视觉吸引力、装盘技巧和清晰度。推荐调整以增强食谱的受欢迎度和参与度。
25Real Estate Photography Feedback房地产摄影反馈
Review the real estate photos provided by the solopreneur. Analyze property highlights, lighting, and angles. Suggest improvements for more captivating property listings and quicker sales.审查个体企业主提供的房地产照片。分析物业亮点、照明和角度。建议改进以获得更吸引人的物业列表和更快的销售。
26Fashion Lookbook Evaluation时尚画册评估
Examine the fashion lookbook images shared. Provide insights on outfit presentation, model poses, and brand style. Offer feedback to improve brand visibility and fashion sales.检查共享的时尚画册图像。提供关于服装展示、模特姿势和品牌风格的见解。提供反馈以提高品牌可见度和时尚销售。
27Travel Photography Assessment旅行摄影评估
Inspect the travel photos from the solopreneur’s travel blog. Comment on composition, destination highlights, and post-production. Recommend techniques to attract more blog readership and engagement.检查来自个体企业主旅行博客的旅行照片。评论构图、目的地亮点和后期制作。推荐技巧以吸引更多的博客读者和参与度。
28Digital Art Feedback数字艺术反馈
Evaluate the digital art pieces submitted. Analyze artistic techniques, theme representation, and visual appeal. Provide feedback for refining art skills and market reception.评估提交的数字艺术作品。分析艺术技巧、主题代表性和视觉吸引力。提供反馈以完善艺术技能和市场接受度。
29Craftwork Presentation Analysis手工艺品展示分析
Review the photos of the solopreneur’s craft items. Comment on craftsmanship, presentation, and market appeal. Advise on presentation techniques to boost sales and appreciation.审查个体企业主的手工艺品的照片。评论工艺、展示和市场吸引力。建议展示技巧以增加销售和赞赏。
30Workshop or Webinar Poster Feedback工作坊或网络研讨会海报反馈
Inspect the workshop or webinar poster shared. Assess visual hierarchy, event details clarity, and branding. Offer insights to increase event registrations and brand recognition.检查共享的工作坊或网络研讨会海报。评估视觉层次、活动细节的清晰度和品牌。提供增加活动注册和品牌识别的见解。

文浩MarvinChatGPTPrompt阅读需 10 分钟

30条SEO prompt

内容转自@hridoyreh的推

序号英文Prompt中文翻译
1Find Long-Tail Queries Prompt: List down all the long-tail queries related to {keyword}寻找长尾查询 提示:列出与{关键词}相关的所有长尾查询
2Get LSI Keywords Prompt: Generate a list of all LSI terms related to {keyword}获取LSI关键词 提示:生成与{关键词}相关的所有LSI术语列表
3Search Intent Prompt: Classify the following set of keywords based on search intent in a table form (informational, commercial, and transactional) {keywords list}搜索意图 提示:根据搜索意图将以下关键词集分类成表格形式(信息性,商业性和交易性){关键词列表}
4Keyword Clusters Prompt: Group keywords together to create content clusters: {keywords list}关键词聚类 提示:将关键词组合在一起创建内容聚类:{关键词列表}
5On-Page SEO Analysis Prompt: Pretend like you are an SEO expert. Conduct an On-page SEO audit of the following webpage {url}页面SEO分析 提示:假装你是一个SEO专家。对以下网页进行页面SEO审计{网址}
6Brainstorm Content Topics Prompt: Generate 10 content ideas related to {topic}头脑风暴内容主题 提示:生成与{主题}相关的10个内容想法
7Content Outline Prompt: Create a content outline for {topic}内容大纲 提示:为{主题}创建内容大纲
8Create a Content Brief Prompt: Create a content brief for an article on {topic}创建内容简介 提示:为{主题}的文章创建内容简介
9Page Titles by Content Prompt: Suggest 10 catchy titles for {topic}通过内容创建页面标题 提示:为{主题}建议10个吸引人的标题
10Meta Descriptions Prompt: Generate a meta description of a maximum of 155 characters for a webpage on {topic details}元描述 提示:为{主题详情}的网页生成最多155个字符的元描述
11Find & Fix Grammar Issues Prompt: Check the grammar of the following content and point out the issues {content}查找并修复语法问题 提示:检查以下内容的语法并指出问题{内容}
12Back Your Content by Data Prompt: Prove a list of statistics along with reference links for a {title}用数据支持你的内容 提示:为{标题}提供一份带有参考链接的统计数据列表
13Find FAQs Related to Content Prompt: Generate a list of FAQs for a webpage on {topic description}查找与内容相关的常见问题解答 提示:为{主题描述}的网页生成常见问题解答列表
14Write Strong & Effective CTAs Prompt: Generate a strong call-to-action for {product} targeted to {audience details}编写强有力和有效的CTAs 提示:为{产品}生成一个针对{受众详情}的强有力的行动呼吁
15ALT Text by URL Prompt: Write ALT text for {URL of image}通过URL编写ALT文本 提示:为{图片的URL}编写ALT文本
16ALT Text by Description Prompt: Write ALT text for {image description}通过描述编写ALT文本 提示:为{图片描述}编写ALT文本
17Win Featured Snippets Using NLP Content Prompt: Generate an NLP -friendly answer to {question} in brief使用NLP内容赢得特色摘录 提示:简要生成对{问题}的NLP友好答案
18Topical Gaps Prompt: Find topical gaps in the following outline: {content outline}主题空白 提示:在以下大纲中找到主题空白:{内容大纲}
19Rephrase Content Prompt: Rephrase the following content {content here}重新表述内容 提示:重新表述以下内容{这里的内容}
20YouTube Descriptions Prompt: Write a description for a YouTube video about {description here}YouTube描述 提示:为关于{这里的描述}的YouTube视频编写描述
21Find Sites in Your Niche Prompt: Find popular sites related to {description} for link building找到你的利基网站 提示:找到与{描述}相关的热门网站进行链接构建
22Outreach Emails Prompt: Write an outreach email on behalf of {your name} from {company name} to ask for a backlink from their {their webpage URL} to {your webpage URL}外联电子邮件 提示:代表{你的名字}从{公司名}写一封外联电子邮件,要求他们从{他们的网页URL}到{你的网页URL}的回链
23Double Down HARO Link Building Prompt: Write a HARO response on behalf of {name, designation} for {HARO query details} by {author name}加倍HARO链接构建 提示:代表{名字, 职务}回应HARO查询{HARO查询详情}由{作者名字}
24Descriptions for Pinterest Pins Prompt: Write a description for a Pinterest pin for {title}Pinterest Pins的描述 提示:为{Pinterest pin的标题}编写描述
25Schema Markup Prompt: Make FAQ Schema markup code for the following set of Questions and Answers: {list of questions and answers}Schema标记 提示:为以下一组问题和答案制作FAQ Schema标记代码:{问题和答案列表}
26Multiple Hreflang Tags Prompt: Generate the hreflang tags for a web page targeted to {country} in {language}, {country} in {language}, etc.多个Hreflang标签 提示:为一个针对{国家}的{语言},{国家}的{语言}等的网页生成hreflang标签
27Create robots.txt Rules Prompt: Generate a robots.txt rules to {description here}创建robots.txt规则 提示:生成robots.txt规则到{这里的描述}
28Generate .htaccess Rewrite Rules Prompt: Generate the .htaccess rewrite rules to 301-redirect {source URL} to {destination URL}生成.htaccess重写规则 提示:生成.htaccess重写规则将301重定向{源URL}到{目标URL}
29XML Sitemap Prompt: Create a valid XML sitemap that includes the following URLs: {list of URLs}XML站点地图 提示:创建一个包含以下URL的有效XML站点地图:{URL列表}
30RegEx for Google Search Console Prompt: Generate a RegEx in RE2 syntax to {description here}Google搜索控制台的RegEx 提示:生成一个RE2语法的RegEx到{这里的描述}

文浩MarvinSeo阅读需 5 分钟
logo
文浩Marvin,一个分享有趣好用APP和网站技术的博主